title: UI grid does not update
body: <p>I have read all the previous questions, tried several solutions but still my grid won't update. It loads all the data correctly. But if I try to add data, the grid doesn't update. I have a simple test button to add data, however, The alert get's shown but the grid doesnt update.</p>
  
  <pre><code>(function() {
    'use strict';
  
    angular
      .module('app')
      .controller('MainCtrl', MainCtrl);
  
    MainCtrl.$inject = ['$scope', '$state', 'Auth', '$modal', 'scrapeAPI', '$http',  'uiGridConstants', '$alert', 'recommendationsAPI', 'Upload'];
  
    function MainCtrl($scope, $state, Auth, $modal, uiGridConstants, scrapeAPI, $http, $alert, recommendationsAPI, Upload) {
      $scope.user = Auth.getCurrentUser();
  
      $scope.recommendation = {};
      $scope.recommendations = [];
      $scope.recommendationPostForm = true;
      $scope.busy = true;
      $scope.allData = [];
  
      //get data from server
      recommendationsAPI.getAllRecommendations()
        .then(function(data) {
          console.log('looks found ');
          console.log(data);
          $scope.recommendations = data.data;
          $scope.allData = data.data;
          // $scope.nextPage();
          $scope.busy = false;
        })
        .catch(function(err) {
          console.log('failed to get looks ' + err);
        });
  
  
      $scope.addData = function() {
      var n = $scope.recommendationgrid.data.length + 1;
      alert (n);
      $scope.recommendations.data.push ({
                  "recommendation": "abc",
                });           
      };
  
      // Hier wordt de grid opgebouwd met all informatie. 
      $scope.recommendationgrid = {
      showGridFooter: true,
      showColumnFooter: false,
      enableFiltering: false,
      columnDefs: [
          { field: 'recommendation'},
  
      ],
      data: 'recommendations',
      onRegisterApi: function(gridApi) {
              $scope.gridApi = gridApi;
      }
  };
  
    }
  })();
  </code></pre>