0

HTML

<section ng-app="app">
     <table ng-controller="VoicemailsCtrl">
        <caption>{{test}}</caption>
    </table>
</section>

JS

var app = angular.module('app', [])
              .controller('VoicemailsCtrl', ['$scope', VoicemailsCtrl]);

function VoicemailsCtrl($scope, $http)
{
    $scope.vms = [1,2,3];
    $scope.test = 'this is a test';
}

Can be seen at:

http://jsfiddle.net/tx9nbo8g/6/

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
Rafael
  • 7,605
  • 13
  • 31
  • 46

4 Answers4

2

You missed adding ng-app="app" in the section.

Check the updated fiddle Fiddle

Apart from this you need to add

angular 1.2.1

and

No wrap in head

in framework and extension. .

Abhishek Prakash
  • 964
  • 2
  • 10
  • 24
2

Please find below working code :

Html:

<body ng-app="app">
    <section>
        <table ng-controller="VoicemailsCtrl">
            <caption>{{test}}</caption>
        </table>
    </section>
</body>

Js:

var app = angular.module('app', []);
app.controller('VoicemailsCtrl', ['$scope','$http',VoicemailsCtrl]); //You forgot to add $http

function VoicemailsCtrl($scope, $http) {
    $scope.vms = [1,2,3];
    $scope.test = 'this is a test';
}

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

Darshan Patel
  • 2,839
  • 2
  • 25
  • 38
1

Add ng-app="app" on section element & also you need to change the script loading option inside your fiddle from OnLoad to No Wrap in <head/>

Markup

<section ng-app="app">
    <table ng-controller="VoicemailsCtrl">
        <caption>{{test}}</caption>
    </table>
</section>

Working Fiddle

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
1

Your HTML should have to be changed. You need to tell angular where app is starting. Default ng-app is also a valid app declaration. 

 <section ng-app="MyApp">
         <table ng-controller="VoicemailsCtrl">
            <caption>{{test}}</caption>
        </table>
    </section>

In controller

 angular.module('MyApp', [])
 .controller('VoicemailsCtrl', ['$scope', function ($scope){
    $scope.vms = [1,2,3];
    $scope.test = 'this is a test';
 }]);

fiddle

You should not use global declaration of controller. Its been deprecated in angular 1.3+ versions. You should use controller directive to declare a controller.

Vineet
  • 4,525
  • 3
  • 23
  • 42
  • The declaration of controller is absolutely fine. Though it will be present in the global namespace but its not deprecated at all. Its still using controller to register a controller. – Abhishek Prakash Jul 23 '15 at 17:50
  • @AbhishekPrakash, its true. But in angular 1.3+ versions global declaration will not work. – Vineet Jul 23 '15 at 17:53
  • Can you share an official link? Reason being I am using 1.4.* and using the same way to declare a controller. – Abhishek Prakash Jul 23 '15 at 17:54
  • @AbhishekPrakash BTW you can get it by your own, but here is a http://stackoverflow.com/questions/31346238/angularjs-beginner-ng-controller-not-working/31346404#31346404. Ronnie's comment will make you clear. – Vineet Jul 23 '15 at 18:00
  • Please check, The code he is referring to do not register the constructor function using module.controller(). Using constructor function directly as controller is deprecated. – Abhishek Prakash Jul 23 '15 at 18:05
  • Thanks for sharing your thoughts. – Vineet Jul 23 '15 at 18:06