ng-class not refresh when data change

Question

I want to change the color item whan my data change. I use this template code:

<ion-view view-title="Evénement" class="content">
    <ion-content class="padding">
         <ion-list>
            <ion-item ng-repeat="myuser in users">
                <span>{{myuser.user_name}} </span><a class="button button-icon icon ion-person-add icon_add" ng-click="addContact('{{myuser.id}}')" ng-class="{contact_added : myuser.isContact }"></a>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

I use firebase to loading and saving data. So, I use this code for synchronizing data.

ref.child('contact').child(authData.uid).on('child_added', function (snapshot) {
        var myUser = snapshot.key();
        $scope.users.push(myUser);
    });

When I add a contact on firebase, my color icon does not change immediately. I must click and move my mouse on html page to update the color.

How I have to do to refresh instantly my icon when the data change?

Answer 1

Don't use $scope.$apply(), use AngularFire.

Angular apps should not have to manage the digest loop. Firebase directly integrates with Angular with the AngularFire library, which manages data synchronization and the triggering of $digest.

In your case you can create a $firebaseArray to synchronize your changes:

angular.module('app', ['firebase'])
  .constant('FirebaseUrl', '<my-firebase-app>')
  .service('rootRef', ['FirebaseUrl', Firebase])
  .controller('MyCtrl', MyController);

function MyController($scope, rootRef, $firebaseArray) {
  var userRef = rootRef.child('contact').child(authData.uid);
  $scope.users = $firebaseArray(userRef);
}

The advantage of using AngularFire is two fold. Firstly, you don't have to manage $scope.$apply(). Secondly, you get realtime array synchronization for free.