AngularJS 1.5.x Service Not Bound Correctly and is Not Updating in Controllers
<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>