ng-repeat does nothing

Question

ng-repeat does nothing

Re-factored my Angular app to pass in essential data via a factory service. Now suddenly The ng-repeat doesn't output anything to the page, it doesn't run at all, and I get no error messages! What happened?

<ul ng-repeat="section in sections">
    <li  class="section_title {{section.active}}" >
        {{section.name}}
    </li>
    <ul>
        <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu([$parent.$index, $index])" ng-repeat="tutorial in AppData.section.tutorials">
            {{tutorial.name}}
        </li>
    </ul>
</ul>


    var Tutorials = angular.module('Tutorials', ['functions', 'tutorials']);

Tutorials.factory("AppData", function(){
    return { 
        sectionNumber: 0,
        tutorialNumber: 0,
        questionNumber: 0,
        sections: sections
    }
})

Tutorials.run(function(AppData){loadFromMenu([0,0, true], AppData);})

function loadFromMenu (tut, AppData) {
    if (tut[1] === AppData.tutorialNumber && tut[0] === AppData.sectionNumber && !tut[2]) {//if clicked on already playing tut
        return;
    } 
    if (tut[1] !== undefined && tut[0] !== undefined) {
        AppData.tutorialNumber = tut[1];
        AppData.sectionNumber = tut[0];
    }
    var section = AppData.sections[tut[0]];
    for (var x in AppData.sections) {
        AppData.sections[x].active = "inactive";
        for (var y in AppData.sections[x].tutorials){
            AppData.sections[x].tutorials[y].active = "inactive";
        }
    }
    section.active = "active";
    section.tutorials[tut[1]].active = "active";
    //$scope.$apply();
    AppData.questionNumber = 0;
    if (AppData.sectionNumber === 1){
        conjugationController();
    }
};

angularjs

Answer 1

Based on your code, your problem is that you actually aren't using a controller. A controller is how we programmatically access the scope, to which we assign what we get from services. Views are also tied to scopes. So when you say ng-repeat="section in sections", it's looking for a property on the current scope called sections. In most cases, this would correspond to something in your controller that said $scope.sections = .... I see nothing like this in your code. Here's how it should work.

<div ng-controller="MainCtrl">
  <ul ng-repeat="section in sections">
    <li  class="section_title {{section.active}}" >
      {{section.name}}
    </li>
    <ul>
      <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu([$parent.$index, $index])" ng-repeat="tutorial in AppData.section.tutorials">
        {{tutorial.name}}
      </li>
    </ul>
  </ul>
</div>

(PS: nesting ULs the way you did is not really valid HTML; you'll want to put the inner UL in an LI.)

Now I don't know what exists outside the ul, so I just made it a div, where we told the view which controller to assign to that section of the page. So now our controller must place those variables on the scope:

Tutorials.controller( 'MainCtrl', function ( AppData ) {
  $scope.sections = AppData.sections;
});

And now it will work. As for the rest of your loadFromMenu function, most of that you'll want to port to your controller, but I'm not sure what you're trying to do with that run block or with the loadFromMenu function. So here is a general principle: generic manipulation of the service data should occur in the service.

Feel free to post a comment with more info and I'll update this answer, but the reason the ngRepeat doesn't work is because you have no controller and your sections variable was never assigned to the scope.