CODEWITHSUNDEEP
htmlangularjs
John K
John K

Reputation: 55

Angular Curly braces not rendering in html

In my browser, the value of the angular curly braces is not displayed. There are no errors in the console and the console logs the value, but in my browser its a blank page. However it should say 'hello World' in the top left.

my app.js:

    (function() {
      'use strict';
      angular.module('testModule', []);
    }());

my controller:

    (function () {
        'use strict';
        angular
            .module('testModule')
            .controller('testController', Controller);
        Controller.$inject = [];

        function Controller() {
            var vm = this;        
            vm.test = "hello World";        
            activate();   
            function activate() {
                console.log(vm.test);
            }
        }
    })();

my html:

<body ng-controller="testController">
    <div>
        {{vm.test}}
    </div>
</body>

Upvotes: 0

Views: 483

Answers (2)

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You need to rewrite this line 

<body ng-controller="testController">

as 

<body ng-controller="testController as vm">

This is because you are using this inside your controller and referencing the scope variable with this cannot be accessed directly by the Angular expression so you need to create a alias of the controller using as you can give it any alias. Then use this alias to access the scope variable. If you use 

 `<body ng-controller="testController as ctrl">`

then you need to access by {{ctrl.test}}

Upvotes: 1

Shantanu
Shantanu

Reputation: 3513

in template update it like; (As you're using controller as syntax)

ng-controller="testController as vm"

Here's a working plunker

http://plnkr.co/edit/tbENuThIIszfe2D2e4qx?p=preview

Upvotes: 1

Related Questions