Lately, I've been experimenting with the Controller as syntax in Angular. However, I seem to be struggling to grasp its functionality. I am currently following a tutorial that utilizes $scope to bind the members of the controller function rather than using 'this' (i.e., creating var vm = this). The objective of the code is to add a newly created bookmark to an array named bookmarks within the controller. The issue arises when executing createBookmark(bookmark) and setting up Angular in index.html. Despite my efforts, I can't seem to figure out why the new bookmark is not being pushed into the bookmarks array. I even tried defining it as createBookmark(vm.bookmark), but unfortunately, this syntax is considered invalid.

Any explanations on where I might be going wrong would be extremely helpful.

MainController.js

angular
    .module('app')
    .controller('MainController', MainController);

function MainController() {
    var vm = this;

    vm.categories = [
        { 'id': 0, 'name': 'Development' },
        { 'id': 1, 'name': 'Design' },
        { 'id': 2, 'name': 'Exercise' },
        { 'id': 3, 'name': 'Humor' }
    ];

    vm.bookmarks = [
        { 'id': 0, 'title': 'AngularJS', 'url': 'http://angularjs.org', 'category': 'Development' },
        { 'id': 1, 'title': 'Egghead.io', 'url': 'http://egghead.io', 'category': 'Development' },  
    ];

    vm.currentCategory = null;

    vm.setCurrentCategory = setCurrentCategory;
    vm.isCurrentCategory = isCurrentCategory;

    vm.isCreating = false;
    vm.isEditing = false;

    vm.startCreating = startCreating;
    vm.cancelCreating = cancelCreating;
    vm.startEditing = startEditing;
    vm.cancelEditing = cancelEditing;
    vm.shouldShowCreating = shouldShowCreating;
    vm.shouldShowEditing = shouldShowEditing;

    function setCurrentCategory(category) {
        vm.currentCategory = category;
        vm.cancelCreating();
        vm.cancelEditing();
    }

    function isCurrentCategory(category) {
        return vm.currentCategory !== null && category.name === vm.currentCategory.name;
    }

    //---------------------------------------------------------------------------------------------
    // CRUD
    ---------------------------------------------------------------------------------------------

    function resetCreateForm() {
        vm.newBookmark = {
            title: "",
            url: "",
            category: vm.currentCategory
        };
    }

    function createBookmark(bookmark) {
        bookmark.id = vm.bookmarks.length;
        vm.bookmarks.push(bookmark);

        resetCreateForm();
    }

    vm.createBookmark = createBookmark;
   //---------------------------------------------------------------------------------------------
    // CREATING AND EDITING STATES
    -------------------------------------------------------------------------------------------

    function startCreating() {
        vm.isCreating = true;
        vm.isEditing = false;

        resetCreateForm();
    }

    function cancelCreating() {
        vm.isCreating = false;
    }

    function shouldShowCreating() {
        return vm.currentCategory && !vm.isEditing;
    }

index.html

<!-- Content: Bookmarks-->
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div ng-repeat="bookmark in vm.bookmarks | filter:{category:vm.currentCategory.name}">
                <button type="button" class="close">&times;</button>
                <button type="button" ng-click="vm.startEditing()" class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span>
            </button>
                <a href="{{ bookmark.url }}" target="_blank">{{ bookmark.title }}</a>
            </div>
            <hr>;

           <!-- Creating -->
            <div ng-if="vm.shouldShowCreating()">
                <button type="button" class="btn btn-link" ng-click="vm.startCreating()">
                    <span class="glyphicon glyphicon-plus"></span>
                    Create Bookmark
                </button>;

               <form class="create-form"  ng-show="vm.isCreating" role="form" ng-submit="vm.createBookmark(vm.newBookmark)" novalidate>;
                   <div class="form-group">
                       <label for="newBookmarkTitle">Bookmark Title</label>
                       <input type="text" class="form-control" id="newBookmarkTitle" ng-model="vm.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="vm.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="vm.cancelCreating()">Cancel</button>;
               </form>;

            </div>;