CODEWITHSUNDEEP
angularjs-scope
Scott Nimrod
Scott Nimrod

Reputation: 11595

Unable to bind data using AngularJS

I am unable to get binding to work. I am not sure what I am doing wrong. When I attempt to display the value of the header on the page, the page generated is "{{name}}" instead of "My App".

Here is the code:

<!DOCTYPE HTML>
<html ng-app="appModule">
<head ng-controller="appController">
    <meta name="viewport" content="width=device-width" />
    <title>Home</title>

    <script src="~/Views/Scripts/angular.js"></script>
    <script>
        /// <reference path="~/Views/Scripts/angular.js" />

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

        appModule.controller("appController", function ($scope)
        {
            $scope.name = "My App";
        });
    </script>
</head>
<body ng-controller="appController">
    <div>
        <h1>{{name}}</h1>
    </div>
</body>
</html>

Upvotes: 0

Views: 535

Answers (1)

bobbarebygg
bobbarebygg

Reputation: 366

I got it working by loading angular directly from google CDN, so the error might be in the loading of angular

See here: http://jsfiddle.net/9JyX6/

<html ng-app="appModule">
<head ng-controller="appController">
    <title>Home</title>

    <script>
        /// <reference path="~/Views/Scripts/angular.js" />

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

        appModule.controller("appController", function ($scope)
        {
            $scope.name = "My App";
        });
    </script>
</head>
<body ng-controller="appController">
    <div>
        <h1>{{name}}</h1>
    </div>
</body>
</html>

Upvotes: 1

Related Questions