Atualizando Div com AngularJS - html, css, angularjs, ligação de dados, angular-ngmodel

Eu tenho um DIV definido da seguinte forma:

    <button ng-repeat="message in user.messages">

<div ng-model="message" ng-show="{{message.received && !message.read}}" class="btn bg-green"></div>
<div ng-model="message" ng-show="{{message.received && message.read}}" class="btn bg-green" ></div>
<div ng-model="message" ng-show="{{!message.received}}" class="btn bg-amber"></div>

Basicamente eu estou mudando (mostrar / esconder) um íconedependendo do status da mensagem (recebido, enviado, lido). No entanto, quando eu atualizo o status da mensagem, os ícones não mudam, mesmo que eu tenha ligado com o ng-model. Eu preciso atualizar a página inteira para atualizar os ícones.

De alguma forma eu posso fazer essa atualização através do Angular?

Obrigado.

Respostas:

1. ng-show não precisa ser interpolado, você pode simplesmente escrever "message.recieved ..."

2. por que não usar ng-class assim:

   div ng-class = "{" bg-verde ": message.recieved," bg-âmbar ":! meessage.recieved}"

Não ligue o div ao ng-model, não faz sentido usar a ligação de dados bidirecional, quando não é uma entrada, e a view não pode atualizar o modelo

Parece que você está vinculando todos os três elementos div ao ng-model quando eles não precisam ser. Ng-model só deve estar vinculado a input, select, textarea ou outra entrada customizada. https://docs.angularjs.org/api/ng/directive/ngModel

O uso de ng-class deve resolver esse problema sem a necessidade de 3 divs separados. Isso permitirá que você mude dinamicamente a classe com base em diferentes expressões. https://docs.angularjs.org/api/ng/directive/ngClass

<div ng-class="{"bg-green": message.received && !message.read, "bg-amber": !message.received}"></div>