title: Directive with isolate scope is not updated when an element pushed into the array in controller
body: <p>I am trying to implement a basic recent searches list on my page. When the search button is clicked two inputs are concatenated and pushed to an array called "recentSearchItems". recentSearchItems starts as an empty array and is never updated on the directive even though it is updated on the homeCtrl.</p>
  
  <p>index.html: </p>
  
  <pre><code>&lt;body ng-controller="HomeCtrl"&gt;
  &lt;div class="outer-wrapper"&gt;
      &lt;div class="main-wrapper" ng-class="{'search-page': searchClicked}" ng-show="uiRouterState.current.name == 'home'"&gt;
          &lt;div class="home-logo" ng-class="{'animate': searchClicked}"&gt;
          &lt;/div&gt;
          &lt;div class="home-content-wrapper" ng-class="{'animate': searchClicked}"&gt;
              &lt;div class="main-header" ng-class="{'animate': searchClicked}"&gt;
                  Lorem ipsum dolor sit!
              &lt;/div&gt;
              &lt;div class="main-large-text" ng-class="{'animate': searchClicked}"&gt;
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              &lt;/div&gt;
              &lt;form class="form-elements"&gt;
                  &lt;input type="text" class="large-textbox" name="looking-for" placeholder="I am looking for" ng-model="placeKeyword"&gt;
                  &lt;input type="text" class="medium-textbox" name="place" placeholder="Istanbul" ng-model="placeNear" style="margin-left: 10px;"&gt;
                  &lt;button ui-sref="home" class="search-btn" style="margin-left: 10px;" ng-click="startSearch()"&gt;
                      &lt;span&gt;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div ui-view&gt;&lt;/div&gt;
      &lt;div class="footer-wrapper"&gt;
          &lt;div class="footer-links"&gt;
              &lt;a href="#"&gt;About us&lt;/a&gt;
              &lt;a href="#"&gt;Contact&lt;/a&gt;
              &lt;a href="#"&gt;Blog&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>html of the content (to replace "ui-view" directive above): </p>
  
  <pre><code>&lt;div class="search-items" ng-show="uiRouterState.current.name == 'home'"&gt;
      &lt;div class="places-list"&gt;
          &lt;place-grid ng-repeat="place in places"&gt;&lt;/place-grid&gt;
      &lt;/div&gt;
      &lt;recent-searches recent-search-items="recentSearchItems"&gt;&lt;/recent-searches&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>homeCtrl:</p>
  
  <pre><code>placesApp.controller("HomeCtrl", ["$scope", "$state", "FoursquareApiService", ($scope, $state, FoursquareApiService) =&gt; {
      $scope.uiRouterState = $state;
      $scope.searchClicked = false;
      $scope.recentSearchItems = [];
  
      $scope.startSearch = () =&gt; {
          if($scope.placeNear) {
              $scope.addToSearchHistory($scope.placeKeyword, $scope.placeNear);
              $scope.searchClicked = true;
  
              var promise = FoursquareApiService.getPlaces($scope.placeNear, $scope.placeKeyword);
              promise.then(
                  function(response) {
                      $scope.places = response;
                  },
                  function(error) {
                      console.log("Couldn't get the places data: " + error)
                  }
              );
          }
      };
  
      $scope.addToSearchHistory = (placeKeyword , placeNear) =&gt; {
          $scope.recentSearchItems.push(placeKeyword + " in " + placeNear);
  
      };
  
  }]);
  </code></pre>
  
  <p>directive: </p>
  
  <pre><code>placesApp.directive("recentSearches", () =&gt; {
      return {
          restrict: "E",
          replace: true,
          scope: {
              recentSearchItems: "="
          },
          templateUrl: "views/recent-searches.html"
      }
  });
  </code></pre>
  
  <p>directive template: </p>
  
  <pre><code>&lt;div class="recent-searches"&gt;
      &lt;h3&gt;RECENT SEARCHES&lt;/h3&gt;
      &lt;hr class="under-header"&gt;
      &lt;div class="recent-search-items" ng-repeat="recentSearchItem in recentSearchItems"&gt;
          &lt;p ng-bind="recentSearchItem"&gt;&lt;/p&gt;
          &lt;hr&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>