current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

Here is my html and angular js code

<html>
<head>
    <title></title>
    <script src="Scripts/angular.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        function DemoController($scope) {
            $scope.user = {
                dateOfBirth: new Date(1970, 0, 1)
            }
        }
    </script>
</head>
<body>
    <div ng-app="demo" ng-controller="DemoController">
        Date Of Birth:
        <my-datepicker type="text" ng-model="user.dateOfBirth" />
        <br>
        Current user's date of birth: <span id="dateOfBirthDisplay">{{user.dateOfBirth}}</span>
    </div>
</body>
</html>

It doesn't work and gives output

    Date Of Birth: 
    Current user's date of birth: {{user.dateOfBirth}}

But if i remove ="demo" from ng-app="demo" in the div it works...

share|improve this question
add comment

3 Answers

up vote 3 down vote accepted

When you assign a name to the ng-app directive, you essentially create a module with that name. In this module, you will then have to define your directives, services, filters and configurations.

In your case, when you assigned the name "demo", you created a module named "demo". Function DemoController now is no longer part of this module.

To use this function AND assign a module to your application, you need to use the following way of defining a controller:

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

app.controller('DemoController', [function () {
    //The body of demo controller
}]);

This way, the application knows which module's controller needs to be associated for the scope of the corresponding view.

EDIT: The ng-app directive reference

share|improve this answer
 
thnks...that did the trick –  iJay Jun 27 '13 at 6:50
add comment
up vote 1 down vote

My solution works, try this : http://plnkr.co/edit/zwOKitT8wznO17yZfz15?p=preview

<body ng-app="">
    <div ng-controller="DemoController">
        Date Of Birth:
        <br>
        Current user's date of birth: <span id="dateOfBirthDisplay"><span ng-bind="user.dateOfBirth"></span></span>
    </div>
</body>
share|improve this answer
 
If there is no value to the ng-app directive, you can simply use ng-app without the ng-app="" code... –  callmekatootie Jun 27 '13 at 6:52
add comment
up vote 0 down vote

The value of ng-app attribute defines the application's module name. In your case that's "demo". While you haven't declared DemoController within the module "demo", using an angular.module call, it isn't visible within your ng-app html, executed in the scope of "demo" module.

What will work for ng-app="demo" is:

<script type="text/javascript" language="javascript">
    angular.module('demo', []).controller('DemoController', function ($scope) {
        $scope.user = {
            dateOfBirth: new Date(1970, 0, 1)
        }
    });
</script>
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.