[Angular-Scaled Web] Refactor code into Models

angular.module(‘Eggly‘, [
    ‘ui.router‘,
    ‘categories‘,
    ‘categories.bookmarks‘
])
    .config(function($stateProvider, $urlRouterProvider){
        $stateProvider
            .state(‘eggly‘, {
                url:‘‘,
                abstract: true
                //abstract: To prepend a url to all child state urls.
            });

        $urlRouterProvider.otherwise(‘/‘);
    })

    .controller(‘MainController‘, function ($scope , $state) {
        $scope.categories = [
            {"id": 0, "name": "Development"},
            {"id": 1, "name": "Design"},
            {"id": 2, "name": "Exercise"},
            {"id": 3, "name": "Humor"}
        ];

        $scope.bookmarks = [
            {"id": 0, "title": "AngularJS", "url": "http://angularjs.org", "category": "Development" },
            {"id": 1, "title": "Egghead.io", "url": "http://angularjs.org", "category": "Development" },
            {"id": 2, "title": "A List Apart", "url": "http://alistapart.com/", "category": "Design" },
            {"id": 3, "title": "One Page Love", "url": "http://onepagelove.com/", "category": "Design" },
            {"id": 4, "title": "MobilityW OD", "url": "http://www.mobilitywod.com/", "category": "Exercise" },
            {"id": 5, "title": "Robb Wolf", "url": "http://robbwolf.com/", "category": "Exercise" },
            {"id": 6, "title": "Senor Gif", "url": "http://memebase.cheezburger.com/senorgif", "category": "Humor" },
            {"id": 7, "title": "Wimp", "url": "http://wimp.com", "category": "Humor" },
            {"id": 8, "title": "Dump", "url": "http://dump.com", "category": "Humor" }
        ];

        $scope.isCreating = false;
        $scope.isEditing = false;
        $scope.currentCategory = null;
        $scope.editedBookmark = null;

　　　　...
       ...
       ...
    })

[
    {"id":0, "title": "AngularJS", "url": "http://angularjs.org", "category": "Development" },
    {"id":1, "title": "Egghead.io", "url": "http://angularjs.org", "category": "Development" },
    {"id":2, "title": "A List Apart", "url": "http://alistapart.com/", "category": "Design" },
    {"id":3, "title": "One Page Love", "url": "http://onepagelove.com/", "category": "Design" },
    {"id":4, "title": "MobilityWOD", "url": "http://www.mobilitywod.com/", "category": "Exercise" },
    {"id":5, "title": "Robb Wolf", "url": "http://robbwolf.com/", "category": "Exercise" },
    {"id":6, "title": "Senor Gif", "url": "http://memebase.cheezburger.com/senorgif", "category": "Humor" },
    {"id":7, "title": "Wimp", "url": "http://wimp.com", "category": "Humor" },
    {"id":8, "title": "Dump", "url": "http://dump.com", "category": "Humor" }
]

[
    {"id": 0, "name": "Development"},
    {"id": 1, "name": "Design"},
    {"id": 2, "name": "Exercise"},
    {"id": 3, "name": "Humor"}
]

angular.module(‘eggly.models.bookmarks‘, [

])
    .service(‘BookmarksModel‘, function($http){
        var BookmarksModel = {},
            URLS = {
                FETCH: ‘data/bookmarks.json‘
            },
            bookmarks;

        function extract(result) {
            return result.data;
        }

        function cacheBookmarks(result) {
            bookmarks = extract(result);
            return bookmarks;
        }

        BookmarksModel.getBookmarks = function() {
            return $http.get(URLS.FETCH).then(cacheBookmarks);
        };

        return BookmarksModel;
    })

;

angular.module(‘eggly.models.categories‘, [

])
    .service(‘CategoriesModel‘, function ($http, $q) {
        var model = this,
            URLS = {
                FETCH: ‘data/categories.json‘
            },
            categories;

        function extract(result) {
            return result.data;
        }

        function cacheCategories(result) {
            categories = extract(result);
            return categories;
        }

        model.getCategories = function() {
            return (categories) ? $q.when(categories) : $http.get(URLS.FETCH).then(cacheCategories);
        };

        model.getCategoryByName = function(categoryName) {
            var deferred = $q.defer();

            function findCategory(){
                return _.find(categories, function(c){
                    return c.name == categoryName;
                })
            }

            if(categories) {
                deferred.resolve(findCategory());
            } else {
                model.getCategories()
                    .then(function() {
                        deferred.resolve(findCategory());
                    });
            }

            return deferred.promise;
        };


    })
;

<a ng-click="setCurrentCategory(null)"><img class="logo" src="assets/img/eggly-logo.png"></a>
<ul class="nav nav-sidebar">
    <li ng-repeat="category in categoriesListCtrl.categories" ng-class="{‘active‘:isCurrentCategory(category)}">
        <a ui-sref="eggly.categories.bookmarks({category:category.name})">
            {{category.name}}
        </a>
    </li>
</ul>

<h1>{{bookmarksListCtrl.currentCategoryName}}</h1>
<div ng-class="{active: isSelectedBookmark(bookmark.id)}"  ng-repeat="bookmark in bookmarksListCtrl.bookmarks | filter:{category:currentCategory.name}">
    <button type="button" class="close" ng-click="deleteBookmark(bookmark)">&times;</button>
    <button type="button" class="btn btn-link" ng-click="setEditedBookmark(bookmark);startEditing();" ><span class="glyphicon glyphicon-pencil"></span>
    </button>
    <a href="{{bookmark.url}}" target="_blank">{{bookmark.title}}</a>
</div>
<hr/>
<!-- CREATING -->
<div ng-if="shouldShowCreating()">
    <button type="button" class="btn btn-link" ng-click="startCreating()">
        <span class="glyphicon glyphicon-plus"></span>
        Create Bookmark
    </button>
    <form class="create-form" ng-show="isCreating" role="form" ng-submit="createBookmark(newBookmark)" novalidate>
        <div class="form-group">
            <label for="newBookmarkTitle">Bookmark Title</label>
            <input type="text" class="form-control" id="newBookmarkTitle" ng-model="newBookmark.title" placeholder="Enter title">
        </div>
        <div class="form-group">
            <label for="newBookmarkURL">Bookmark URL</label>
            <input type="text" class="form-control" id="newBookmarkURL" ng-model="newBookmark.url" placeholder="Enter URL">
        </div>
        <button type="submit" class="btn btn-info btn-lg">Create</button>
        <button type="button" class="btn btn-default btn-lg pull-right" ng-click="cancelCreating()">Cancel</button>
    </form>
</div>
<!-- EDITING -->
<div ng-show="shouldShowEditing()">
    <h4>Editing {{editedBookmark.title}}</h4>

    <form class="edit-form" role="form" ng-submit="updateBookmark(editedBookmark)" novalidate>
        <div class="form-group">
            <label>Bookmark Title</label>
            <input type="text" class="form-control" ng-model="editedBookmark.title" placeholder="Enter title">
        </div>
        <div class="form-group">
            <label>Bookmark URL</label>
            <input type="text" class="form-control" ng-model="editedBookmark.url" placeholder="Enter URL">
        </div>
        <button type="submit" class="btn btn-info btn-lg">Save</button>
        <button type="button" class="btn btn-default btn-lg pull-right" ng-click="cancelEditing()">Cancel</button>
    </form>
</div>