angular.cshtml

@section scripts {
    <script>
        var app = window.app = {};
        app.userTypes = @Html.Raw(Json.Encode(Model.GetUserTypes()));
    </script>

    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-resource.min.js"></script>
    <script src="~/Scripts/underscore.min.js"></script>
    <script src="~/Scripts/angular/main.js"></script>
}

<!-- Grid -->
<div id="content" style="width: 800px;" data-ng-app="userApp">
    <div data-ng-controller="UserCtrl">
        <button id="btnAdd" type="button" class="btn btn-primary" data-ng-click="addUser()">Add User</button>
        
        <ng-user-modal id="userModal" title="Edit User">
            <form class="form-horizontal" id="userForm" name="userForm" role="form">
                <div class="alert alert-danger">
                    <ul id="danger">
                    </ul>
                </div>

                <input type="hidden" id="id" name="id" data-ng-model="user.id" />

                <div class="form-group">
                    <label for="fname" class="col-sm-4 control-label">First Name:</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="fname" name="fname" placeholder="First Name" data-ng-model="user.fname">
                    </div>
                </div>

                <div class="form-group">
                    <label for="lname" class="col-sm-4 control-label">Last Name:</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" data-ng-model="user.lname">
                    </div>
                </div>

                <div class="form-group">
                    <label for="email" class="col-sm-4 control-label">Email:</label>
                    <div class="col-sm-8">
                        <input type="email" class="form-control" id="email" name="email" placeholder="Email" data-ng-model="user.email">
                    </div>
                </div>

                <div class="form-group">
                    <label for="userTypeId" class="col-sm-4 control-label">User Type:</label>
                    <div class="col-sm-8">
                        <select id="userTypeId" name="userTypeId" class="form-control" data-ng-model="user.userTypeId">
                            <option value="0">-- Select One --</option>
                            @foreach (var type in Model.GetUserTypes())
                            {
                                <option value="@type.UserTypeID">@type.UserType</option>
                            }
                        </select>
                    </div>
                </div>
            </form>
        </ng-user-modal>
        
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th></th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email Name</th>
                    <th>User Type</th>
                </tr>
            </thead>
            <tbody id="users">
                <tr data-ng-repeat="user in users">
                    <td>
                        <a href='#' class="edit btn btn-primary" data-ng-click="editUser(user)">Edit</a>
                        <a href='#' class="delete btn btn-danger" data-ng-click="deleteUser($index)">Delete</a>
                    </td>
                    <td>{{ user.fname }}</td>
                    <td>{{ user.lname }}</td>
                    <td>{{ user.email }}</td>
                    <td>{{ user.userTypeId | getUserType }}</td>
                </tr>
            </tbody>
        </table>

        <script id="modalTemplate.html" type="text/ng-template">
           <div class="modal fade userModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">{{ title }}</h4>
                        </div>
                        <div class="modal-body" ng-transclude>
                        
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-default" data-dismiss="modal">Close</button>
                            <button id="btnsubmit" class="btn btn-primary" data-ng-click="saveForm(user)">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </script>

    </div>
</div>

main.js

/*
 *  Using AngularJS, Underscore, Bootstrap modal and Bootbox.
 */ 

// Declare module and inject ngResource.
var module = angular.module('userApp', ['ngResource']);

(function (module) {
    // Setup the module
    module.filter('getUserType', getUserTypeFilter);
    module.factory('User', ['$resource', userFactory]);
    module.directive('ngUserModal', ngUserModalDirective);
    module.controller('UserCtrl', ['$scope', 'User', userController]);

    // Define controller
    function userController($scope, User) {
        // Cache the elements
        //var $modal = angular.element('.userModal');

        // Get users
        var users = $scope.users = User.getUsers();

        // Set an empty object for individual record
        $scope.user = {  };

        // Add user
        $scope.addUser = function () {
            // Clear the form
            $scope.title = 'Add User';
            $scope.user = { id: 0};
            angular.element('#userModal').modal('show');
        };

        // Save the form
        $scope.saveForm = function (user) {
            // Add vaildation

            if (user.id == 0) {
                // Create a new user
                var u = new User(user);
                u.$save(function (response) {
                    $scope.users.push(angular.extend(u, response.id));
                    angular.element('#userModal').modal('hide');
                });
            } else {
                // Update and refresh the row data
                user.$save(function (response) {
                    var thisUser = _.findWhere(users, { id: user.id });
                    
                    angular.extend(thisUser,  user);
                    angular.element('#userModal').modal('hide');
                });
            }
        };

        // Populate form for editing
        $scope.editUser = function(user) {
            // Get from memory if it has id. Fix the controller to return id when adding a new user.
            $scope.title = 'Edit User';
            $scope.user = user;
            angular.element('#userModal').modal('show');

            //User.getUserById({ id: user.id }).$promise.then(function (response) {
            //    $scope.user = response;
            //    angular.element('.userModal').modal('show');
            //});
        };
        
        // Delete user
        $scope.deleteUser = function (index) {
            var toRemove = $scope.users[index];
            bootbox.confirm("Are you sure you want to delete this user?", function (result) {
                if (result == true) {
                    User.deleteUser({ id: toRemove.id }).$promise.then(function () {
                        $scope.users.splice(index, 1);
                    });
                }
            });
        };

    }

    // Define directive(s)
    function ngUserModalDirective() {
        return {
            restrict: 'EA',
            transclude: true,
            replace: true,
            templateUrl: 'modalTemplate.html'
            //scope: {
            //    title: '@'
            //}
        };
    }
    
    // Define filter(s)
    function getUserTypeFilter() {
        return function (userTypeId) {
            if (userTypeId) {
                return _.findWhere(app.userTypes, { UserTypeID: parseInt(userTypeId) }).UserType;
            }
            return '';
        };
    }

    // Define factory
    function userFactory($resource) {
        return $resource('/Home/:dest/', {}, {
            getUserById: { method: 'POST', params: { dest: 'GetUserByID' } },
            getUsers: { method: 'GET', params: { dest: 'GetUsers' }, isArray: true },
            deleteUser: { method: 'POST', params: { dest: 'DeleteUser'} },
            save: { method: 'POST', params: { dest: 'Save' } }
        });
    }

})(module);