AngularJs : injected a constant into a controller - how to access it in the controller's view?

Issue

In app.js, I have

(function ()
{
    angular.module('routerDemo',
        [
             'ui.router',   // Routing
         ])

})();

angular.module('routerDemo').constant('constants',  { blip: 'blop', blup: 307 });
angular.module('routerDemo').constant('another_constant',  42);

and in controller_1.js

Controller_1.$inject = ['$rootScope', '$state', 'constants', 'another_constant'];


function Controller_1(   $rootScope,   $state,   constants,   another_constant)
{

and in the view

<div ng-controller="Controller_1 as controller_1">
    <h1>This is view 1</h1>

    <div>Controller_1.constants.blip == {{controller_1.constants.blip}}</div>
    <div>Controller_1.the_answer == {{controller_1.another_constant}}</div>

but they display as blank (although I can view them if I breakpoint in the controller, so it's just a matter of the syntax in the view)).

What am I doing wrong?

Solution

Just assign the constants to this inside your controller

// controller_1
function Controller_1($rootScope, $state, constants, another_constant){
    this.constants = constants;
    this.another_constant = another_constant;
}

// view
<div ng-controller="Controller_1 as controller_1">
<h1>This is view 1</h1>

<div>Controller_1.constants.blip == {{controller_1.constants.blip}}</div>
<div>Controller_1.the_answer == {{controller_1.another_constant}}</div>
</div>

Answered By - tbone849