title: AngularJS: Scope in multiple views not updating
body: <p>I have one controller and two views.  </p>
  
  <p><strong>ClustersContorller</strong></p>
  
  <pre><code>angular.module('app.controllers').controller('ClustersController', [
    '$scope', 'ClustersService', function($scope, ClustersService) {
      ClustersService.getAll().success(function(data) {
        $scope.clusters = data;
      });
      $scope.$on('cluster:added', function(event, data) {
        ClustersService.createNew(data).then(
          function(res) {
            $scope.clusters.push(res.data);
          },
          function(res) {
            console.log( 'Unable to create a cluster!' );
          }
        );
      });
    }
  ]);
  </code></pre>
  
  <p>Now one view is working great when I send the HTTP request and update the scope variable by pushing to <code>$scope.clusters</code>: </p>
  
  <pre><code>&lt;section class="clusters"&gt;
      &lt;h2 ng-show="clusters.length &lt; 1"&gt;You have no clusters :(&lt;/h2&gt;
    &lt;a class="btn btn-default btn-block" data-ng-repeat="cluster in clusters" data-template="{{cluster.templateId}}"&gt;
      &lt;h2&gt; {{ cluster.name }} &lt;/h2&gt;
      &lt;p&gt; {{ cluster.description }} &lt;/p&gt;
    &lt;/a&gt;
      &lt;add-cluster-modal&gt;&lt;/add-cluster-modal&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>But the other view that is bound with this controller does not update scope.clusters in the bindings:  </p>
  
  <pre><code>&lt;ul class="dropdown-menu" role="menu" data-ng-controller="ClustersController"&gt;
    &lt;li data-ng-repeat="cluster in clusters"&gt;
      &lt;a&gt; {{cluster.name}} &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Just to be clear the first view is bound by the <code>$routeProvider</code> and the second one is a part of a template included directly into the app main html file by <code>ng-include=" 'templates/partials/header.html' "</code></p>
  
  <p>Please feel free to ask me if something is confusing...</p>