AngularJS Controller not displaying

Question

I have the following code which suppose to display all products in the 'SimpleController'. But it is not working, it does not display the products.

<div data-ng-controller="SimpleController">

    <ul>
        <li data-ng-repeat="product in products">
            {{product.productname}}
        </li>
    </ul>
</div>

<script src="angular.min.js"></script>

<script>
    function SimpleController($scope)
    {
        $scope.products = [
            {productname:'ariel',price:'7.50'},
            {productname:'tinahpa',price:'12.00'},
            {productname:'breadbreast',price:'2.00'}
        ];
    }
</script>

angular no longer supports global functions as controllers. Use proper module declarations per documentation — charlietfl
– charlietfl, Commented Jul 11, 2015 at 21:45
you need to attach your controller to the app. the new version does not support this. — Pravin
– Pravin, Commented Jul 11, 2015 at 21:46

Matt Herbstritt · Accepted Answer · 2015-07-11 21:47:58Z

It works fine I think you just forgot to set ng-app. Try this...

DEMO

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>


  <!-- You need to give the ng-app directive the name of your app -->
  <!-- You could also put it in the opening HTML tag -->

  <body ng-app="foo">
    <div data-ng-controller="SimpleController">

        <ul>
            <li data-ng-repeat="product in products">
                {{product.productname}}
            </li>
        </ul>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>


    <script> 

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

        app.controller('SimpleController', SimpleController);

        function SimpleController($scope)
        {
            $scope.products = [
                {productname:'ariel',price:'7.50'},
                {productname:'tinahpa',price:'12.00'},
                {productname:'breadbreast',price:'2.00'}
            ];
        }
    </script>
  </body>

</html>

pro · Accepted Answer · 2015-07-11 21:49:22Z

0

You don't seem to have the app module (ng-app) declared anywhere in your view.

You will also need to have your controller passed to angular.module()'s contoller function.

answered Jul 11, 2015 at 21:49

pro

7927 silver badges31 bronze badges

Collectives™ on Stack Overflow

AngularJS Controller not displaying

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related