title: Update scope value when service data changes
body: <p>I am trying to update the scope value on a view when the service data changes. </p>
  
  <p>The problem is that, (a) if I update the data in a different controller, then (b) the value doesn't update on the view.</p>
  
  <p>main.html</p>
  
  <pre><code>&lt;!-- breadcrumb row --&gt;
  &lt;div ng-controller="mainController"&gt;
      &lt;span ng-if="memberCompany !== null"&gt;{{ memberCompany }}&lt;/span&gt;
  &lt;/div&gt;
  &lt;!-- / breadcrumb --&gt;
  </code></pre>
  
  <p>main.js</p>
  
  <pre><code>// breadcrumb service
  app.service('breadcrumb', function() {
  
      // variables
      var memberCompany = null;
  
      return {
          // get compnay
          getCompany: function() {
              return memberCompany;
          },
          // set company
          setCompany: function(value) {
              memberCompany = value;
          }
      }
  });
  
  // main controller
  app.controller('MainController', ['$scope', 'breadcrumb', function($scope, breadcrumb) {
  
          // get company to display in view
          $scope.memberCompany = breadcrumb.getCompany();
      }
  ]);
  </code></pre>
  
  <p>If I update the service value in a different controller, I would like to be able to display that updated value back on the index view so it's viable across the app</p>
  
  <p>other controller</p>
  
  <pre><code>app.controller('otherController', ['$scope', 'breadcrumb', function($scope, breadcrumb) {
  
      // update company
      breadcrumb.setCompany('StackExchange');
  
      // update the scope data in the view?   
  
  }]);
  </code></pre>
  
  <p>How can I display the updated value on the index view once it's changed?</p>