Angular ng-controller not working

Question

I am new in angular and can't able to find error in below code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Tutorial 2</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script type="text/javascript">
        function testController($scope){
            $scope.data = {message: "test123"};
        }
    </script>
</head>
<body>
<div ng-app="">
    <div ng-controller="testController">
        <!--<input type="text" ng-model="test.sfdc"/>-->
        <h1>{{data.message}}</h1>
    </div>
</div>
</body>
</html>

The above code print <<data.message>> as output. Please let me know where I go wrong.

How new are you in angular? I would recommend getting some tutorial first. — BroiSatse, Jan 18 '16 at 17:38
^ +1 - You've missed a number of elements and probably need a bit more of a grounding in Angular. Need to register your app, then register your controller with the app. — Seonixx, Jan 18 '16 at 17:41
Thanks Seonixx, I am wroking on tutorials and its was not mentioned there that's why got stuck, thanks for the help! — Ritesh Gupta, Jan 18 '16 at 18:00

score 1 · Answer 1 · answered Jan 18 '16 at 17:35

1

You haven't defined your angular module.

For example

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

Then in your HTML:

<html ng-app="app">

answered Jan 18 '16 at 17:35

Seonixx

468
3
16

tanenbring · Answer 2 · 2016-01-18T18:37:18.843

0

You need to register your controller with angular.

angluar.module(APP_NAME).controller("testController", testController);

edited Jan 18 '16 at 18:37

answered Jan 18 '16 at 17:36

tanenbring

780
4
14

where is module angular name? – Pankaj Parkar Jan 18 '16 at 17:45

score 0 · Accepted Answer · answered Jan 18 '16 at 17:42

You need to register the controller in your angular app.

Try this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Tutorial 2</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script type="text/javascript">        
        var DummyCtrl = function ($scope){
            $scope.data = {message: "test123"};
        }
        angular.module('app', [])
        .controller('DummyCtrl', DummyCtrl);
    </script>
</head>
<body>
<div ng-app="app">
    <div ng-controller="DummyCtrl">
        <!--<input type="text" ng-model="test.sfdc"/>-->
        <h1>{{data.message}}</h1>
    </div>
</div>
</body>
</html>

Angular ng-controller not working

3 Answers3