title: AngularJS 1.5.x Service Not Bound Correctly and is Not Updating in Controllers
body: <p>For some reason when I update the factory value the associated views aren't updating.  I'm binding to an object in the service not a string so I don't see what I've done wrong, but there is definitely something wrong with the implementation.  I've reduced the code for brevity, and added it to a plunker.  I thought I was over screwing services up, but apparently not.  I even read this <a href="https://github.com/angular/angular.js/wiki/Understanding-Scopes" rel="nofollow">article</a> again to make sure what I thought I understood was correct.</p>
  
  <p>The value of the title is picked up the first time and you see 'Welcome!' in the title, but after that it won't update to 'Up Next!'.</p>
  
  <p><a href="https://plnkr.co/edit/ma1SDJyIKoFPWznXdxTO?p=preview" rel="nofollow">https://plnkr.co/edit/ma1SDJyIKoFPWznXdxTO?p=preview</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="app"&gt;
  &lt;head&gt;
      &lt;html-title&gt;&lt;/html-title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;main&gt;&lt;/main&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  (function () {
  
      'use strict';
  
      function MainController(HtmlTitleFactory) {
  
          HtmlTitleFactory.set('Welcome!'); // title gets set
  
          // check title was changed
          this.data = HtmlTitleFactory.get();
  
          setTimeout(function() {
              // updates title
              HtmlTitleFactory.set('Up Next!');
  
              // title looks to be set, but changes not picked up in view
              console.log(HtmlTitleFactory.get());
          }, 3000);
      }
  
      MainController.$inject = [
          'HtmlTitleFactory'
      ];
  
      var main = {
          template: '&lt;div&gt;{{ vm.data.title }}&lt;/div&gt;',
          controller: MainController,
          controllerAs: 'vm'
      };
  
      ////////////////////////////
  
      function HtmlTitleController(HtmlTitleFactory) {
  
          var vm = this;
  
          //vm.title = HtmlTitleFactory.get().title;
          vm.title = HtmlTitleFactory.get();
      }
  
      HtmlTitleController.$inject = [
          'HtmlTitleFactory'
      ];
  
      var htmlTitle = {
          template: '&lt;title&gt;{{ vm.title.title }}&lt;/title&gt;',
          controller: HtmlTitleController,
          controllerAs: 'vm'
      };
  
      ////////////////////////////
  
      function HtmlTitleFactory() {
  
          var service = {
              title: 'Default'
          };
  
          function set(title) {
              // originally tried this since bound to object this should work
              // service.title = title;
  
              // wasn't working so tried this as well
              angular.extend(service, { 
                 title: title
              });
          }
  
          function get() {
              return service;
          }
  
          return {
              set: set,
              get: get
          };
      }
  
      HtmlTitleFactory.$inject = [];
  
      ////////////////////////////
  
      angular
          .module('app', [])
          .component('main', main)
          .component('htmlTitle', htmlTitle)
          .factory('HtmlTitleFactory', HtmlTitleFactory);
  
  })();
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>