title: View not updating when it should
body: <p>Disclaimer, I am an angular noob.</p>
  
  <p>So what I have been trying to do for the past few hours is toggle the authentication in my service with the click of a button which should show the user information or a sign in image depending on if the authentication is true. It displays the correct information when the page loads but will not re-update the view when I click the button. Just for fun, I added a input field that is bound to the user information username to see if the binding was working. I am able to update the username live as expected but I noticed a weird result. If I toggle the authentication button nothing changes but the view will update when I try to update the username via the input box. The change is being made to the authentacation, but just not being reflected for some reason.</p>
  
  <p>Any help on this would be greatly appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module("appMain", []);
  
  app.service("userInformation", [function() {
      this.authentacation = true;
      this.username = "user";
      this.balance = "10.00";
      this.avatar = "http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/81/81322ac9812dad58e9525a010c76bcf4e585d820.jpg";
  
      this.toggleAuthentacation = function() {
          this.authentacation = !this.authentacation;
          console.log(this.authentacation);
      };
  
  }]);
  
  app.controller("headerController", ["$scope", "userInformation", function($scope, userInformation) {
      $scope.userInformation = userInformation;
      console.log($scope.userInformation);
  
  
      document.getElementById("btn1").addEventListener("click", function() {
        userInformation.authentacation = ! userInformation.authentacation;
        $scope.userInformation = userInformation;
        console.log($scope.userInformation);
      });
  
  }]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;link rel="stylesheet" href="css/style.css" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;body ng-app="appMain"&gt;
  
      &lt;header ng-controller="headerController"&gt;
        &lt;img id="logo" src="/img/logo.png"&gt;
        &lt;div id="userInfo" ng-show="userInformation.authentacation"&gt;
            &lt;ul&gt;
                &lt;li&gt;Hello {{userInformation.username}}!&lt;/li&gt;
                &lt;li&gt;Balance: ${{userInformation.balance}}&lt;/li&gt;
                &lt;li&gt;&lt;img id="avatar" src="{{userInformation.avatar}}" /&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div id="userInfo" ng-hide="userInformation.authentacation"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;img src="https://steamcommunity-a.akamaihd.net/public/images/signinthroughsteam/sits_01.png"&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
  
          &lt;button id="btn1"&gt;Button1&lt;/button&gt;
          &lt;input type="text" ng-model="userInformation.username"&gt;
      &lt;/header&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>