AngularJS failed to generate dynamic menu

Question

I'm trying to build a dynamic menu by using angularJS, unfortunately it doesn't work and I have no idea why. Any thought?

The idea is: I'll iterate through a collection of menuItems of the current controller instance. The name property of the item will be shown as the menuItem name and the path property of the menuItem will be passed into nagivate() function as a parameter.

var clientParams = {
    appKey: "....."
    , appSecret: "....."
};

var app = angular.module("helloKinveyApp", ["ngRoute", "kinvey"]);

app.config(["$routeProvider", function($rootProvider) {
    $rootProvider
        .when("/", {
            controller: "loginController"
            , templateUrl: "app/partials/login.html" })
        .when("/partials/password_reset", {
            controller: "resetPasswordController"
            , templateUrl: "app/partials/password_reset.html" })
        .when("/partials/sign_up", {
            controller: "signupController"
            , templateUrl: "app/partials/sign_up.html" })
        .when("/partials/logged_in", {
            controller: "loggedInController"
            , tempalteUrl: "app/partials/logged_in.html" })
        .otherwise({ redirectTo: "/"});
}]);

app.run(["$location", "$kinvey", "$rootScope", function($location, $kinvey, $rootScope) {
    var promise = $kinvey.init({
       appKey: clientParams.appKey
        , appSecret: clientParams.appSecret
    });
    
    promise.then(function() {
        console.log("Kinvey init with success");
        determineBehavior($location, $kinvey, $rootScope);
    }, function(errorCallback) {
        console.log("Kinvey init with error: " + JSON.stringify(errorCallback));
        determineBehavior($location, $kinvey, $rootScope);
    });
}]);

function determineBehavior($location, $kinvey, $rootScope) {
    var activeUser = $kinvey.getActiveUser();
    console.log("$location.$$url: " + $location.$$url);
    
    if (activeUser != null) {
        console.log("activeUser not null, determine behavior");
        
        if ($location.$$url != "/partials/logged-in")
            $location.path("/partials/logged-in");
    }
    else {
        console.log("activeUser null redirecting");
        
        if ($location.$$url != "/partials/login")
            $location.path("/partials/login");
    }
}


'use strict';
app.controller("loginController", function($scope, $kinvey, $location) {
    $scope.menuItems = [
        {name: "Pricing", path: "#"}
        , {name: "Customers", path: "#"}
        , {name: "Help", path:"#"}
        , {name: "Sign up", path: "#"}
    ];
    
    $scope.signin = function($scope, $kinvey, $location) {
        alert("signin()");
    };
    
    $scope.signup = function($scope, $kinvey, $location) {
        alert("signup()");
    };
    
    $scope.forgotPassword = function($scope, $kinvey, $location) {
        alert("forgotPassword");
    }
    
    $scope.navigate = function (path2Navigate) {
        alert(path2Navigate);
    }
});

<div class="col-xs-12 col-sm-12 col-sm-offset-3 col-md-8 col-md-offset-3">
    <h3>Welcome back</h3>
    <br><br>
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <div class="col-xs-2 col-sm-2 col-md-2">
                <label class="control-label" for="userName">User Name</label>
            </div>
            
            <div class="col-xs-6 col-sm-6 col-md-6">
                <input type="text" class="form-control" id="userName" placeholder="Enter user name">
            </div>
        </div>
        
        <div class="form-group">
            <div class="col-xs-2 col-sm-2 col-md-2">
                <label class="control-label" for="password">Password</label>
            </div>
            
            <div class="col-xs-6 col-sm-6 col-md-6">
                <input type="password" class="form-control" id="password" placeholder="Enter password">
            </div>
        </div>
        
        <div class="form-group">
            <div class="col-xs-6 col-sm-6 col-sm-offset-2 col-md-6">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="">Remember me?
                    </label>
                </div>
            </div>
        </div>
        
        <div class="form-group">
            <div class="col-xs-2 col-sm-2 col-sm-offset-2 col-md-2">
                <button type="submit" class="btn btn-primary" data-ng-click="signin()">Sign in</button>
            </div>
            
            <div class="col-xs-3 col-sm-3 col-md-3 pull-left">
                <button type="button" class="btn btn-link" data-ng-click="forgotPassword()">Forgot my password?</button>
            </div>
        </div>
    </form>
</div>

Answer 1

You're using ng-repeat on the <ul> tag which will generate you a <ul> for each item in your menu array. Use it on <li> instead so that each one is a menu item as opposed to an empty menu.

You also don't need to wrap item.path in {{}}. This is a common mistake when you're starting out with angular. Change it to data-ng-click="navigate(item.Path)" I also don't see you using your loginController anywhere in your HTML. Try <header class="container" ng-controller="loginController">