AngularJS Data Binding is not happening

Question

I am just playing around with AngularJS and I wrote a small piece of code which I have shared here. But for some reason, the binding of data doesnt happen. Here is the HTML and JS code for those who do not want to go to the plucker site.

first.html

<!doctype html>
<html ng-app="firstApp">
<head>
    <title>First Angular JS</title>
    <script src="/lib/angular.min.js"></script>
    <script src="/js/first.js"></script>
</head>
<body>
    <div ng-controller="FirstController">
        <span>Name:</span>
        <input type="text" ng-model="first">    
        <input type="text" ng-model="last">
        <button ng-click='updateMessage()'>Message</button>
        <hr>{{heading + message}}
    </div>

</body>
</html>

first.js

var firstApp = angular.module('firstApp',[]);
firstApp.controller = ('FirstController',function($scope)
{
  $scope.first = "Some";
  $scope.last = "one";
  $scope.heading = "Message: ";
  $scope.updateMessage = function()
    {
      $scope.message = 'Hello' + $scope.first + ' ' + $scope.last + '!';
    };
  });

In the HTML, I am using express to redirect calls to its appropriate places

node_server.js

var express = require('express');
var app = express();
app.use('/', express.static('./static')).
    use('/images',express.static('./images')).
    use('/lib',express.static('./lib/angular-1.2.22'));
app.listen(8080);

The output is showing {{message + heading}}. Does anyone have any ideas why this wouldnt work?

gconsidine · Accepted Answer · 2014-08-14 23:53:48Z

2

The issue is in the way you're declaring your controller.

You have:

firstApp.controller = ('FirstController',function($scope) ...

It should be:

firstApp.controller('FirstController', function($scope) ...

answered Aug 14, 2014 at 23:53

gconsidine

1556 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rivas Over a year ago

Thank you rabaznaz. I spent a lot of time poring over the code for this one.

betomoretti · Accepted Answer · 2014-08-15 00:17:09Z

1

Try this:

firstApp.controller('FirstController', ['$scope', function($scope) { ...

Doc's for controller in Angular

answered Aug 15, 2014 at 0:17

betomoretti

2,1961 gold badge15 silver badges15 bronze badges

Collectives™ on Stack Overflow

AngularJS Data Binding is not happening

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related