title: AngularJS View not updating when Controllers $scope variables changed?
body: <p>basically my issue is that I have a AngularJS view (home.html) which contains a variable in double brackets like so: {{message}}  </p>
  
  <p>When the $scope.message variable is modified, the view with does not update, although it should?  I have tried adding $scope.$apply() which results in an exception along the lines of 'Action in Progress'</p>
  
  <p>Check my code below.  The {{message}} part in home.html is not being updated when $scope.doLogin is called in MainCtrl, even though I have set $scope.message to a new value in that function.</p>
  
  <p>Any help is greatly appreciated and if any further info is needed, please ask.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html ng-app="myApp"&gt;
  &lt;head&gt;
  
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="stylesheet.css" rel="stylesheet"&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;base href="/"&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.9/ngStorage.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.socket.io/socket.io-1.3.5.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div ng-controller="MainCtrl"&gt;
          &lt;nav class="navbar navbar-default"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;a class="navbar-brand" href="#"&gt;TriviaAttack&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div id="navbar" class="navbar-collapse collapse"&gt;
                      &lt;form id="loginForm" class="navbar-form navbar-right"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;input type="text" placeholder="Email" class="form-control" ng-model="loginData.username"&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;input type="text" placeholder="Password" class="form-control" ng-model="loginData.password"&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;button type="submit" class="btn btn-success" ng-click="doLogin()"&gt;Sign In&lt;/button&gt;
                          &lt;/div&gt;                  
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  
      &lt;div ng-view&gt;
  
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="./app/app.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>home.html</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;h1&gt;Welcome to the Home Page&lt;/h1&gt;
      &lt;p&gt;{{message}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var myApp = angular.module('myApp',['ngRoute', 'ngStorage']);
  
  myApp.controller('MainCtrl', ['$rootScope', '$scope', '$location', 
      function($rootScope, $scope, $location) {
  
      $scope.message = 'testing message';
  
      $scope.loginData = {
          username: '',
          password: '',
          loggedIn: false
      }
  
      $scope.doLogin = function() {
  
          $scope.message = 'message changed!';
          $scope.$apply();
  
          Auth.doLogin($scope.loginData.username, $scope.loginData.password)
          .success(function(data) {
              if (data.success) {
                  AuthToken.setToken(data.token);
                  $location.path('/home');
                  console.log($scope.loginData.loggedIn);
              }
          });
  
          $scope.loginData = {};
      }
  
  }]);
  
  //Middleware for all requests which adds the users token to the HTTP header.
  myApp.factory('TokenInterceptor', ['$q', '$location', '$localStorage',
      function($q, $location, $localStorage) {
  
      //On each request, check if the user is logged in with a valid token.
      var interceptor = {
          request: function(config) {
  
              config.headers['X-Authorization-Token'] = $localStorage.token;
              return config;
  
          },
          responseError: function(response) {
              if(response.status === 401 || response.status === 403) {
                  $location.path('/login');
              }
              return $q.reject(response);
          }
      };
      return interceptor;
  }]);
  
  myApp.config(['$routeProvider','$locationProvider','$httpProvider',
      function($routeProvider, $locationProvider, $httpProvider) {
  
          $routeProvider.
              when('/', {
                  templateUrl: './app/views/landingpage.html',
                  controller: 'MainCtrl'
              }).
              when('/home', {
                  templateUrl: './app/views/home.html',
                  controller: 'MainCtrl'
              }).
              otherwise({
                  redirectTo: '/'
              });
  
  
          $locationProvider.html5Mode(true);
  
          $httpProvider.interceptors.push('TokenInterceptor');
  
      }
  
  ]);
  
  console.log('app.js loaded!');
  </code></pre>