0

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>

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

2 Answers 2

1

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>
Sign up to request clarification or add additional context in comments.

Comments

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.