Angular getting variable value

Question

I'm learning AngularJS and I have problem with data binding. When I try to get value from $scope.mytext i get {{mytext}}. Here is the code:

 <!DOCTYPE html>
 <html ng-app="myApp">
      <head>
    <title>Hello</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
    <script>
        var MainController = function ($scope) {
        $scope.mytext = "Angular JS Rulez";
        }
    </script>
</head>
<body>
<div ng-app> 
    <div ng-controller="MainController">
        <p>{{mytext}}</p>
    </div>
</div>
</body>
</html>`

Please make a better effort to format your code properly (including correct indentation). — Matt C
– Matt C, Commented Mar 20, 2016 at 0:14

Paul Fitzgerald · Accepted Answer · 2016-03-20 09:26:54Z

1

You had some errors in the way you set up the app.

You never defined the app, you have declared ng-app twice, the second time you haven't assigned anything to ng-app and there was an error with the CDN you referenced. Once you defined the app, you then needed to assign the controller to this app.

The below code will work for you, and you can also see the code working by checking out this jsfiddle demo.

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
     <title>Hello</title>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

     <script> 
          var myApp = angular.module('myApp',[]);
          myApp.controller('MainController', ['$scope', function($scope) {
               $scope.mytext = "Angular JS Rulez";;
          }]);
     </script>

  </head>
  <body>
     <div ng-controller="MainController">
        <p>{{mytext}}</p>
     </div>
 </body>
</html>

edited Mar 20, 2016 at 9:26

answered Mar 20, 2016 at 0:06

Paul Fitzgerald

12.1k4 gold badges45 silver badges57 bronze badges

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

1 Comment

Knight Over a year ago

Thanks for help :)

Brian Wagner · Accepted Answer · 2016-03-20 04:16:42Z

1

Looks like you're calling the app in the html, but you haven't defined it anywhere. You must:

define 'myApp' in the javascript portion, and then
assign the controller on it.

Your code simply calls MainController which isn't defined properly on any app.

A basic setup in this case is, as Paul mentions:

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

myApp.controller(MyAppController, ['$scope', function($scope) {
   ...add $scope elements here ... 
]);

Also you shouldn't need to call ng-app twice in the html.

answered Mar 20, 2016 at 4:16

Brian Wagner

1,1971 gold badge9 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular getting variable value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related