Current controller

AngularJS

by Zaiste

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<body ng-app="app" ng-controller="MainCtrl" ng-class="controller"> 
    
    <h1>Current controller: {{controller}}</h1>
    <button ng-click="visit('foo')">Foo</button>
    <button ng-click="visit('bar')">Bar</button>
    <hr/>
    <div class='row'>
        <ng-view></ng-view>
        <div data-alert class="alert-box secondary">
            Compatible only with AngularJS >= 1.1.x
        </div>
    </div>
</body>

CSS

.FooCtrl {
    background-color: #c7c5e6;
}

.BarCtrl {
    background-color: #9dcc7a;
}

JavaScript

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope, $location) {
  $scope.message = 'Message';
    
  $scope.visit = function(path) {
    $location.path(path);
  }
});

app.controller('FooCtrl', function($scope,$location) {  });
app.controller('BarCtrl', function($scope,$location) {  });

app.config(function($routeProvider) {
    $routeProvider.
      when('/foo', {controller:'FooCtrl', template:'FooCtrl\'s template'}).
      when('/bar', {controller:'BarCtrl', template:'BarCtrl\' template'}).
      otherwise({redirectTo:'/'});
  });
app.run(function($rootScope) {
   $rootScope.$on('$routeChangeSuccess', function(ev,data) { 
       // only compatible with AngularJS >= 1.1.x
     if (data.$$route && data.$$route.controller)
       $rootScope.controller = data.$$route.controller;
   })
});