Not populating the links dynamically

Question

I am trying to display links dynamically in AngularJs.

My Js Fiddle is here: http://jsfiddle.net/ADukg/10228/

Due to some reasons mark up is not populating the values in markup but the values are property coming from controller.

Markup

<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
    <div class="collapse navbar-collapse" uib-collapse="navCollapsed">
        <ul class="nav navbar-nav navbar-right">
            <li ng-repeat="leftLink in leftLinks">
                <a href="#!{{leftLink.Url}}">{{leftLink.Text}}</a>
                <li uib-dropdown ng-if="leftLink.subMenus">
                    <a href="#" uib-dropdown-toggle>Hello               
                            <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li ng-repeat="subMenu in leftLink.subMenus">
                            <a href="#!{{subMenu.Url}}">{{subMenu.Text}}</a>
                            <li role="separator" class="divider"></li>
                        </li>
                    </ul>
                </li>
            </li>
        </ul>
    </div>
</div>

Angular Js

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

function MyCtrl($scope) {
    $scope.leftLinks = [
      {
        subMenus: [
          {
            Text: "Profile",
            Url: "/profile"
          },
          {
            Text: "Change Password",
            Url: "/change-password"
          },
          {
            Text: "Logout",
            Url: "#"
          }
        ]
      }
    ];
}

Answer 1

There are some errors in the code. See the jsfiddle: http://jsfiddle.net/ADukg/10232/

It was not calling the controller, because of this, I changed to .controller("Myctrl",function ($scope) and instantiated it on the html ng-controller="Myctrl" on the first element. Another error was the variables name it was leftLink instead of leftLinks.

You have to review your html code, because you can't put the li inside another li directly, but this doesn't cause error.

var myApp = angular.module('myApp',[])
.controller("Myctrl",function ($scope) {
    $scope.leftLinks = 
      {
        subMenus: [
          {
            Text: "Profile",
            Url: "/profile"
          },
          {
            Text: "Change Password",
            Url: "/change-password"
          },
          {
            Text: "Logout",
            Url: "#"
          }
        ]
      };
});