0

I am new to Angular JS. I wrote a simple Angular code but the HTML is not rendering correctly or the expression is not getting evaluated. Please help with what i am missing. I am using angular.min.js minified(1.6).

<!DOCTYPE html>
<html ng-app>
    <head>
        <script src="js/angular.min.js"></script>
        <script>
            function MyFirstCtrl($scope) {
            var employees = ['Catherine Grant', 'Monica Grant',
               'Christopher Grant', 'Jennifer Grant'];

            $scope.ourEmployees = employees;
            };
        </script> 
    </head>
    <body ng-controller='MyFirstCtrl'>
        <h2>Number of Employees: {{ ourEmployees.length}}</h2>      
    </body>
</html>
Improve this question
4
  • ng-controller ? var app ? app.controller ? Commented Nov 24, 2016 at 10:12
  • Read the angular docs to get started..docs.angularjs.org/tutorial Commented Nov 24, 2016 at 10:16
  • Click to start learning w3schools.com/angular/default.asp Commented Nov 24, 2016 at 10:16
  • @Rayon - Im sorry. But i didnt quiet get that. Commented Nov 24, 2016 at 10:22

1 Answer 1

Reset to default
2

Set a root for your application with the ng-app directive and create a controller for your app from which you can handle the $scope: 

var app = angular.module("ng-app", []);
app.controller("myCtrl", function($scope) {
  var employees = ['Catherine Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];
  $scope.ourEmployees = employees;

});
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ng-app">
<div ng-controller="myCtrl">
  <h2>Number of Employees: {{ ourEmployees.length}}</h2>
  </div>
</div>

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

Comments