title: Angularjs not updating the view of ng-repeat after the model updates
body: <p>I have a "menu directive" that refuses to update the items in the html view when the model changes. I'm using angular js with a for-each statement.
  Here is the minimum code I have stripped it down to.</p>
  
  <p>The directive:</p>
  
  <pre><code>export function SideNavbarDirective() {
      'ngInject';
  
      let directive = {
          restrict: 'E',
          templateUrl: 'app/components/sideNavbar/sideNavbar.html',
          scope: {
          },
          controller: SideNavbarController,
          controllerAs: 'vm',
          bindToController: true
      };
  
      return directive;
  }
  
  class SideNavbarController {
      constructor($scope, $timeout) {
          'ngInject';
  
          $scope.myItems = [
              {
                  displayName:"1",
                  highlight:true,
              },
              {
                  displayName: "2",
                  highlight: false,
              },
              {
                  displayName: "3",
                  highlight: false,
              },
          ];
  
          $timeout(() =&gt; {
              $scope.myItems[0].highlight = false;
              $scope.myItems[1].highlight = true;
              $scope.myItems.length = 2;
              $scope.$apply()
          }, 4000);
  
      }
  }
  </code></pre>
  
  <p>The html:</p>
  
  <pre><code>&lt;div ng-repeat="item in myItems" layout="row"&gt;
      &lt;div flex layout="column"&gt;
              &lt;div layout="row"&gt;
                  &lt;span&gt;{{item.displayName | translate}}&lt;/span&gt;&lt;span flex=""&gt;&lt;/span&gt;&lt;span ng-show="{{item.highlight}}"&gt;*&lt;/span&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Initial view:</p>
  
  <pre><code>1* 
  2
  3
  </code></pre>
  
  <p>After the timer:</p>
  
  <pre><code>1* 
  2
  </code></pre>
  
  <p>Expected result after the timer:</p>
  
  <pre><code>1 
  2*
  </code></pre>
  
  <p>As you can se removing an item is reflected. But changing the content of the objects in the array goes by unnoticed by angular. What am I doing wrong?</p>
  
  <p>EDIT:
  I updated the HTML to just print the value of the highlight property instead.</p>
  
  <pre><code>&lt;div ng-repeat="item in myItems" layout="row"&gt;
      &lt;div flex layout="column"&gt;
              &lt;div layout="row"&gt;
                  &lt;span&gt;{{item.displayName | translate}}&lt;/span&gt;&lt;span flex=""&gt;&lt;/span&gt;&lt;span&gt;{{item.highlight}}&lt;/span&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I get:
  Initial view:</p>
  
  <pre><code>1 true
  2 false
  3 false
  </code></pre>
  
  <p>After the timer:</p>
  
  <pre><code>1 false
  2 true
  </code></pre>
  
  <p>So, now I get the expected values. WTF!
  The problem must be with the ng-show expression or what? I'm more confused than ever.</p>