AngularJS: Missing Model 2

by STVinMP

HTML

<script src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-controller="MyCtrl">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">
                 {{ userModel.fullName }}
                 <span ng-if="userModel.isAdmin" class="small pull-right badge">Administrator</span>
            </h3>

        </div>
        <div class="panel-body">
            <form name="userForm" ng-submit="userModel.save()">
                <div class="row">
                    <div class="col-xs-4">Is Admin</div>
                    <div class="col-xs-8">{{ userModel.isAdmin }}</div>
                </div>
                <div class="form-group">
                </div>
            </form>
        </div>
    </div>
</div>

CSS

body {
    margin: 15px;
}

JavaScript

angular.module('myApp', [])
    .service('Session', function () {
    // built on login, contains information about the current user

    var user = {
        id: 81,
        firstName: 'Alec',
        lastName: 'LaLonde',
        active: true,
        joinDate: new Date(1444166612822),
        roles: [{
            name: 'Administrator',
            isAdmin: true
        }, {
            name: 'Owner'
        }]
    };
    return user;
})
    .service('UserDataService', function ($q) {
	return {
        // dummy implementation, just returns a promise resolved with the passed-in user
        save: function(user) {
            return $q.when(user);
        }
    };
})
    .service('UserModel', function ($location, UserDataService) {
    function UserModel(user) {
        angular.extend(this, user);

        this.isAdmin = this.calculateIsAdmin();
        // this could be a filter also
        this.fullName = user.firstName + " " + user.lastName;
    }

    angular.extend(UserModel.prototype, {
        persistAttrs: function() {
          	return _.pick(this, ['id', 'firstName', 'lastName', 'active', 'joinDate']);  
        },
        calculateIsAdmin: function () {
            if (!this.roles) return false;
            return _.some(this.roles, 'isAdmin');
        },
        save: function () {
            UserDataService.save(this.persistAttrs()).then(function(user) {
                $location.path('user/' + user.id);
            });
        }
    });

    return UserModel;
})
    .controller('MyCtrl', function ($scope, Session, UserModel) {
    $scope.userModel = new UserModel(Session);

    // or, e.g.
    // UserDataService.getUser(81).then(function(user) {
    //   $scope.userModel = new UserModel(user);
    // });
});