title: Angular Application not updating UI on save( )
body: <p>I have the following simple CRUD based code (most taken from the AwesomeTodo tutorial).
  It's one html file, just a grid, and when create() is called, I expect the UI to update.
  THIS APP WORKS! It just doesn't refresh the view when i create new records, I have to refresh the browser which obviously reloads the resource.</p>
  
  <pre><code>&lt;div id="apps-table" compile="html"&gt;
  &lt;table ng-controller="AppCtrl" class="table table-striped table-bordered table-hover"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;URL&lt;/th&gt;
          &lt;th&gt;Label&lt;/th&gt;
          &lt;th&gt;Description&lt;/th&gt;
          &lt;th&gt;Status&lt;/th&gt;
          &lt;th&gt;Location&lt;/th&gt;
          &lt;th&gt;&lt;a ng-click="promptForNew()"&gt;&lt;li class="icon-plus"&gt;&lt;/li&gt;&amp;nbsp;New App&lt;/a&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr style="display:none" id="add-app-row"&gt;
          &lt;td&gt;&lt;input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.name"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.url"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.label"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.description"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;select ng-model="app.fields.is_active" ng-change = "formChanged()"&gt;
              &lt;option value=1&gt;Active&lt;/option&gt;
              &lt;option value=0&gt;Inactive&lt;/option&gt;
          &lt;/select&gt;
          &lt;/td&gt;
          &lt;td&gt;&lt;select ng-model="app.fields.is_url_external" ng-change = "formChanged()"&gt;
              &lt;option value=0&gt;Internal&lt;/option&gt;
              &lt;option value=1&gt;External&lt;/option&gt;
  
          &lt;/select&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;a ng-click="create()" id="save_new" class="btn btn-small btn-primary disabled" href=""&gt;&lt;i class="icon-save"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr ng-repeat="app in Apps.record" id="row_{{app.fields.id}}"&gt;
          &lt;td&gt;&lt;input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.name"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.url"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.label"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.description"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;select ng-model="app.fields.is_active" ng-change = "formChanged()"&gt;
                  &lt;option value=1&gt;Active&lt;/option&gt;
                  &lt;option value=0&gt;Inactive&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
          &lt;td&gt;&lt;select ng-model="app.fields.is_url_external" ng-change = "formChanged()"&gt;
              &lt;option value=0&gt;Internal&lt;/option&gt;
              &lt;option value=1&gt;External&lt;/option&gt;
          &lt;/select&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;a ng-click="save()" id="save_{{app.fields.id}}" class="btn btn-small btn-primary disabled" href=""&gt;&lt;i class="icon-save"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;a class="btn btn-small btn-danger" ng-click="delete()"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>var AdminApp = angular.module("AdminApp", ["ngResource"]).
  config(function($routeProvider) {
      $routeProvider.
          when('/', { controller: AppCtrl, templateUrl: 'applications.html' }).
          otherwise({ redirectTo: '/' });
  });
  AdminApp.factory('App', function($resource) {
  return $resource('/rest/system/app/:id/?app_name=admin', {}, { update: { method: 'PUT'}});});
  var AppCtrl = function ($scope, App) {
  $scope.Apps = App.get();
  $scope.formChanged = function(){
      $('#save_' + this.app.fields.id).removeClass('disabled');
  };
  $scope.promptForNew = function(){
      $('#add-app-row').show();
  };
  $scope.save = function () {
      var records = {};
      var record = {};
      record.fields = this.app.fields;
      delete record.fields.name;
      records.record = record;
      var id = this.app.fields.id;
      App.update({id:id}, records, function () {
          $('#save_' + id).addClass('disabled');
  
      });
  };
  $scope.create = function() {
      var currentScope = $scope;
      var records = {};
      var record = {};
      record.fields = this.app.fields;
      records.record = record;
      App.save(records, function() {
          $('#add-app-row').hide();
      });
  };
  $scope.delete = function () {
      var id = this.app.fields.id;
      App.delete({ id: id }, function () {
          $("#row_" + id).fadeOut();
      });
  };
  </code></pre>
  
  <p>};</p>
  
  <p>Here is the index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="AdminApp"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"&gt;
  &lt;link rel="stylesheet" href="/lib/web-core/css/bootstrap.min.css" type="text/css"/&gt;
  &lt;link rel="stylesheet" href="/lib/web-core/css/font-awesome.min.css" type="text/css"/&gt;
  &lt;link rel="stylesheet" href="css/style.css" type="text/css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
  &lt;div ng-view&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="/lib/web-core/js/angular.js"&gt;&lt;/script&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;script src="js/resource.js"&gt;&lt;/script&gt;
  &lt;script src="/lib/web-core/js/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="/lib/web-core/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>All my actions are through ng-click, so I dont appear to be doing anything "outside Angular"</p>
  
  <p>Question is, is this code working as it should? Or should it actually update? </p>
  
  <p>Only way i can update scope is manually using : </p>
  
  <pre><code>$scope.Apps.record.push($scope.app);
  </code></pre>
  
  <p>thats hideous.  Cant use apply or digest, nor should I have to.</p>