title: unable to populate fields using $ctrl in view with AngularJS
body: <p>Using <code>ui-router</code>, and I am resolving data so it is available to my view before it renders, like so:</p>
  
  <pre><code>.state('app.userprofile', {
          url: '/userprofile',
          component: 'user',
          resolve: {
              user: ['userService', function(userService) {
                  return userService.fetchUser();
              }],
              timezones: ['timezoneService', function(timezoneService){
                  return timezoneService.fetchUsaTimeZones();
              }]
          }
      })
  }]);
  </code></pre>
  
  <p>If I log to the console from my <code>state</code>, it shows the response:</p>
  
  <pre><code>resolve: {
     user: ['userService', function(userService) {
        return userService.fetchUser().then(function(response){console.log(response)};
      }]
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/o66cY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o66cY.png" alt="enter image description here"></a></p>
  
  <p>I am trying to populate the fields within my <code>user-profile.htm</code>, which is specified in the <code>user component</code>, using the default controllerAs reference <code>$ctrl</code>. I have used this throughout my app but for some reason within this state it is failing to accomplish this.</p>
  
  <p><strong><em>Question</em></strong></p>
  
  <p>Why are my fields failing to load data provided by the model?</p>
  
  <pre><code>app.component('user', {
      bindings: { user: '&lt;' },
      bindings: { timezones: '&lt;' },
      templateUrl: 'p3sweb/app/components/user/views/user-profile.htm',
      controller: ['userService', 'timezoneService', function(userService, timezoneService) {
  
          var vm = this;
  
       //functinality for updating user
  
      }]
  });
  
  app.factory('userService', function($http, $q) {
  
      var factory = {};
  
          var REST_SERVICE_URI = 'http://localhost:8080/p3sweb/rest-user/';
  
          factory.fetchUser = function() {
  
              var deferred = $q.defer();
               $http.get(REST_SERVICE_URI)
                  .then(
                  function (response) {
                      deferred.resolve(response.data);
                  },
                  function(errResponse){
                      console.error('Error while fetching user');
                      deferred.reject(errResponse);
                  }
              );
  
              return deferred.promise;
          }
  
      return factory;
  
  });
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;form  action="#" method="POST" name="userProfileForm"&gt;
      &lt;div&gt;
          &lt;legend &gt;User Info&lt;/legend&gt;
          &lt;div class="form-group row"&gt;
              &lt;label for="emailAddress"&gt;Email address&lt;/label&gt;
              &lt;div&gt;
                  &lt;input type="email" name="emailAddress" ng-model="$ctrl.user.emailAddress"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>