ng-repeat not working with onsen ui

Question

I'm going nuts, this is such a small thing but I can't find a solution... I have this js file (the angularjs app is initialized in the begining of the html document)

app.controller('slidingMenuCtrl', function($scope) {
    $scope.categories = [
        {title: 'Festas', icon: 'ion-ios-pint', notifications: 3},
        {title: 'Palestras', icon: 'fa-microphone', notifications: 0}
    ];
    $scope.test = 'aaa';
});

and somewhere in my html

<ons-template id="menu.html" ng-controller="slidingMenuCtrl">
    <ons-page>
        <div ng-repeat="x in categories">
            {{x.title}}
        </div>
        <div>
            {{test}}
        </div>
    </ons-page>
</ons-template>

The div with ng-repeat shows nothing, but the one without it shows 'aaa' correctly, why?

Answer 1

ons-template template doesn't support ng-controller directive, basically it needs an idea to process a template and thereafter a processing if we ask for template over http it returns registered ons-template with that id, here you had menu.html

You could do same thing as that by having script tag with type text/ons-template there. Its just same as type/ng-template in angular.

Template

<script type="text/ons-template" id="main.html">

   ...content here...

</script>

Add ng-controller over ons-page will make it working by instantiating controller specified ng-controller directive.

Code

<ons-page ng-controller="slidingMenuCtrl">
    <div ng-repeat="x in categories">
        {{x.title}}
    </div>
    <div>
        {{test}}
    </div>
</ons-page>