Angular Controller with Sugar (Controller as Syntax)

transfer-data-controller.js

(function() {
    'use strict';

/** NOTES:
 *  Controller names start with a capital since they are 'newed up', like a constructor.
 *  The usage of vm as the variable name in this file, and vm in the HTML file have no effect on each other. 
 *  It stands for View Model in both cases, but they are independent names, and can be different.
 * 
 *  Attaching a method or anything else to vm (as below) is similar to attaching things to $scope in controllers not used
 *  with the Controller as syntax
 * 
 *  Notice the separation of bindable members (declarations) vs the implementation of methods. This is for readability.
 *  All bindable members are kept at the top, and are easy to view. Obviously we are relying on JS variable hoisting for this.
 * 
 * */
 
    angular.module('app.component.nameOfComponent')
            .controller('TransferDataCtrl', TransferDataCtrl);

    /**
     * @ngdoc controller
     * @name app.component.nameOfComponent.controllers:transferDataCtrl
     *
     * @description
     * #Controller 
     * Controller to start and stop data transfer to external memory.
     * (obviously this is only a demonstration since it doesn't do much)
     **/

    TransferDataCtrl.$inject = [];

    function TransferDataCtrl() {
    
        var vm = this;
        vm.status = "standby";
        vm.startCopy = startCopy;
        vm.stopCopy = stopCopy;

//////////////////////
        function startCopy() {
            vm.status = "transmitting";
        }

        function stopCopy() {
            vm.status = "standby";
        }
    }
})();

transfer-data.tpl.html

<div ng-controller="TransferDataCtrl as vm">

    <h3>Transfer Data to external memory</h3>
    <div ng-switch="vm.status">
        <div ng-switch-when="standby">
            <p>Transfer is in Standby Mode</p>
                <a class="btn btn-full-width btn-normal" ng-click="vm.startCopy()">Start Transfer</a>
            </div>
        </div><!-- // status == standby -->
        
        <div ng-switch-when="transmitting">
            <table class="table table-condensed">
                <thead>
                    <tr class="green50">
                        <th class="start-time">Start Time</th>
                        <th class="elapsed-time">Elapsed Time</th>
                        <th class="status">Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>12 May 10 040815Z</td>
                        <td>00:32:34</td>
                        <td>63% Complete</td>
                    </tr>
                </tbody>
            </table>
            <a class="btn btn-normal" ng-click="vm.stopCopy()">Stop Transfer</a>
        </div><!-- // status == transmit -->
    </div><!-- // switch -->
</div><!-- //ng-controller-->