How to avoid old value flashed after view updated in Angular?

Question

In my angular app, there is an main app component which have a event listener:

...
$scope.$on('page::change', function(e, value) {
  self.navList = value;
});
...

And a navigation component inside app component, it has only one varible which bind to navList inside app component:

app.component('navBar', {
  bindings: {
    list: '<',
  },
  templateUrl: 'templates/e/navBar.html',
  ...
});

Inside navBar.html, I use ng-repeat to display the data of 'list':

<nav>
    <a ng-repeat="(key,value) in Nav.list" ng-href="{{ value }}" ng-bind="key"></a>
</nav>

Whenever I change the value of navList inside the app, or I emit an event of 'page::change', the view of data will flash in webpage like:

Original:

OldValue

And then flash:

NewValue OldValue

Then finally:

NewValue

How should I fix this? The version of anuglar is 1.5.8

Answer 1

I had the same problem sometimes and my solution was to put an element around to avoid to many bindings to one element:

<nav>
    <span ng-repeat="(key,value) in Nav.list">
       <a ng-href="{{value}}">{{key}}</a>
    </span>
</nav>

I don't know whether this could help you in your situation, but i might be a try.

Answer 2

You could try this:

$scope.$watch('modelName' ,  function ( newValue, oldValue )  { 
  // access new and old value here
  console.log("Your former modelName was "+oldValue+", your current modelName value "+newValue+".");
});