Angularcontroller "As"

by olegdunkan

HTML

<div ng-app="AngularJS"> 
<div ng-controller="MainCtrl as main">
    <div ng-click="main.logger('Test for a one value')">{{ main.nonObservableVar.one }}</div>
    <div ng-click="main.logger('Test for a two value')">{{ main.nonObservableVar.two }}</div>
</div>
</div>

CSS

</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<style>

JavaScript

(function(ng) {
    var app = ng.module('AngularJS', []);
    

    var MainCtrl = function($scope, $log) {
        var localScope = {
            message: 'Message',
            list: [1,2,3,4,5,6]
        };
        var vars = {
            one: 1,
            two: 2
        };
        this.nonObservableVar = vars;

        this.logger = function(obj) {
            $log.info(obj);
            vars.one++;
            vars.two++;
            debugger;
        };

        ng.extend($scope, localScope);
    };

    app.controller('MainCtrl', ['$scope', '$log', MainCtrl]);
    
    return app;
})(angular);