Angular Application not updating UI on save( )

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.

<div id="apps-table" compile="html">
<table ng-controller="AppCtrl" class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
        <th>Name</th>
        <th>URL</th>
        <th>Label</th>
        <th>Description</th>
        <th>Status</th>
        <th>Location</th>
        <th><a ng-click="promptForNew()"><li class="icon-plus"></li>&nbsp;New App</a></th>
    </tr>
    </thead>
    <tbody>
    <tr style="display:none" id="add-app-row">
        <td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.name"></td>
        <td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.url"></td>
        <td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.label"></td>
        <td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.description"></td>
        <td><select ng-model="app.fields.is_active" ng-change = "formChanged()">
            <option value=1>Active</option>
            <option value=0>Inactive</option>
        </select>
        </td>
        <td><select ng-model="app.fields.is_url_external" ng-change = "formChanged()">
            <option value=0>Internal</option>
            <option value=1>External</option>

        </select></td>
        <td>
            <a ng-click="create()" id="save_new" class="btn btn-small btn-primary disabled" href=""><i class="icon-save"></i></a>
        </td>
    </tr>
    <tr ng-repeat="app in Apps.record" id="row_{{app.fields.id}}">
        <td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.name"></td>
        <td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.url"></td>
        <td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.label"></td>
        <td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.description"></td>
        <td><select ng-model="app.fields.is_active" ng-change = "formChanged()">
                <option value=1>Active</option>
                <option value=0>Inactive</option>
            </select>
        </td>
        <td><select ng-model="app.fields.is_url_external" ng-change = "formChanged()">
            <option value=0>Internal</option>
            <option value=1>External</option>
        </select></td>
        <td>
            <a ng-click="save()" id="save_{{app.fields.id}}" class="btn btn-small btn-primary disabled" href=""><i class="icon-save"></i></a>
            <a class="btn btn-small btn-danger" ng-click="delete()"><i class="icon-trash"></i></a>
        </td>
    </tr>

    </tbody>
</table>

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();
    });
};

};

Here is the index.html:

<!DOCTYPE html>
<html ng-app="AdminApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="/lib/web-core/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="/lib/web-core/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
<script src="/lib/web-core/js/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/resource.js"></script>
<script src="/lib/web-core/js/jquery.js"></script>
<script src="/lib/web-core/js/bootstrap.min.js"></script>

</body>
</html>

All my actions are through ng-click, so I dont appear to be doing anything "outside Angular"

Question is, is this code working as it should? Or should it actually update?

Only way i can update scope is manually using :

$scope.Apps.record.push($scope.app);

thats hideous. Cant use apply or digest, nor should I have to.

Glancing through your code and the jsFiddle, I've come across the following issues so far:

  • The framework loading needs to be set to "no wrap (head)" instead of "onLoad" in the jsFiddle settings
  • The ngApp directive is not used anywhere to bootstrap the application
  • There is an ngController directive specifying the AppCtrl controller, but that controller isn't registered with the application module using module.controller (it's just a free-standing variable)
  • The controller functions invoked via ngClick use jQuery to manipulate the DOM--not only is this a big no-no in Angular (use directives, not controllers, for your DOM manipulation), but the jQuery library isn't even included in the jsFiddle.