[SOLVED] AngularJS ng-repeat doesn't render (Browserify and Watchify in background)

AngularJS ng-repeat doesn't render (Browserify and Watchify in background)

I'm attempting to establish a basic Angular app with a module, controller, and view. I'm struggling to get angular to interpret the content within "{{}}".

I'm running Browserify which is pushing everything to "./js/bundle.js".

Here is my code:

index.html

<!DOCTYPE html>
<html ng-app="showNames">
<head>
    <script src="./js/bundle.js"></script>
    <title> Help </title>
</head>

 <body>
    <h1>Show Those Names</h1>
      <ul ng-controller="namesController as namesCtrl">        
        <li ng-repeat="name in namesCtrl">{{name.names}}</li>  
      </ul>     
 </body>

</html>

app.js

"use strict";

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

app.controller('namesController', ['$scope', function($scope){
        $scope.names = ["jeff", "jim", "jay", "Please show up"];
 }]);

My browser only renders {{name.names}}.

Any idea what's going on here, what I'm missing, or how I can improve my approach?

Thanks!

Solution

The problem is that in your ng-repeat you are trying to get names form controller, you should use your model which is part of your controller ie: "name in names" not "name in namesCtrl".

"use strict";

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

app.controller('namesController', ['$scope', function($scope){
        $scope.names = ["jeff", "jim", "jay", "Please show up"];
 }]);

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

 <body>
    <h1>Show Those Names</h1>
      <ul ng-controller="namesController as namesCtrl">        
        <li ng-repeat="name in names">{{name}}</li>  
      </ul>     
 </body>

</html>