title: Using $http in a controller in AngularJS
body: <p>I have an AngularJS 1.2 app. My app has a controller that looks like this:</p>
  
  <pre><code>myApp.controller('MyController', ['$scope', '$rootScope', '$http', 
    function ($scope, $rootScope, $http) {    
      $scope.newItem_Click = function () {
          var modalInstance = $modal.open({
              templateUrl: 'item-dialog.html',
              size: 'md',
              controller: function ($scope, $modalInstance) {
                  $scope.item = { typeId: 7, id: '-1' };
                  $scope.saveItem = function (did) {                    
                      if ($scope.item.description) {
                          if ($scope.item.description.trim().length &gt; 0) {
                              $scope.item.departmentId = did;
                              $modalInstance.close($scope.item);
                          }
                      } else {
                          alert('Please enter your description.');
                      }
                  };
  
                  $scope.cancelItem = function () {
                      $modalInstance.dismiss('cancel');
                  };
  
                  $scope.getItems = function (departmentId) {
                      var url = '/api/items?departmentId=' + departmentId;
                      return $http.get(url).then(
                          function (response) {
                              var results = response.data;
                              results.reverse();
  
                              var items = [];
                              var i = 0;
  
                              angular.forEach(results, function (item, key) {
                                  var local = results[i].CreatedUTC;
                                  results[i].CreatedOn = new Date(local);
                                  items.push(item);
                                  i = i + 1;
                              });
                              console.log(items);
                              $scope.items = items;
                          }
                      );
                  };
  
                  $scope.$on('list-updated', function () {
                      $scope.getItems($scope.item.id);
                  });
              }
          });
  
          modalInstance.result.then(
              function (item) {
                  var apiUrl = '/api/items';
                  apiUrl = apiUrl + '?typeId=' + item.typeId;
                  if (item.departmentId!== '-1') {
                      apiUrl = apiUrl + '&amp;departmentId=' + item.departmentId;
                  }
                  apiUrl = apiUrl + '&amp;content=' + item.description;
                  apiUrl = encodeURI(apiUrl);
  
                  $http.post(apiUrl).then(
                      function () {
                          $rootScope.$broadcast('list-updated');
                      }
                  );
              }
          );
      };
  }]);
  </code></pre>
  
  <p>For some reason, I can successfully save an item. The <code>console.log(items)</code> statement displays all of the items as I would expect. However, my view is not being updated. What am I doing wrong? I suspect its because I'm assigning $scope.items inside of the HTTP response. Yet, I'm not sure how to get around it.</p>
  
  <p>I know this is not recommended. However, I am in crunch mode.</p>