Updating Div with AngularJS

Question

I have a DIV defined as follows:

    <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>

Basically I'm changing (show/hide) an icon depending on the message status (received, sent, read). However, when I update the status of the message, the icons do not change, even though I have bound it with ng-model. I need to refresh the whole page to get the icons updated.

Any way I can do this update through Angular?

Thank you.

Answer 1

1. ng-show doesn't need to be interpolated, you can just write "message.recieved..."

2. why not use ng-class like this:

   div ng-class="{'bg-green' : message.recieved, 'bg-amber': !meessage.recieved}"

Don't bind div to ng-model, it doesn't make any sense to use 2 way data binding, when it is not an input, and the view can't update the model