Breadcrumb in AnjularJs not appearing in single line

Question

I have a module called app.It got four tabs (Home,Library,Data).

In my Library tab (2nd tab), I have my organisation data displayed as a list. initially, the main organisation name is displayed (level 1), on clicking any of the list item, it drills down and shows the next level of organisation data.(level 2) and it goes on.

CompanyName     //level 1
    Administartion  //level 2
        Operations      //level 3
            EmployeeName    //level 4

I want to display the organisation hierarchy on top of the page like this. (The below is when I reach the 4th level in page)

CompanyName | Administartion | Operations | EmployeeName

My idea was to declare an empty array initially, and push the organisation name into it on each clicks, and later displaying it using an ng-repeat.

//Initially in code
    $rootScope.breadCrumb = [];

//on each click
    $rootScope.breadCrumbRef.push({"level":$scope.level,"name":orgName});

//html code.
    <ol class="breadcrumb" ng-repeat="l in breadCrumb">
      <li><a ng-href="">{{l.name}} </a></li>
    </ol>

Please note: I am using twitter bootstrap for html, in bootstrap, a breadCrumb can be attained like given below.

   <ol class="breadcrumb">
    <li><a href="#">CompanyName</a></li>
    <li><a href="#">Administartion</a></li>
    <li><a href="#">Operations </a></li>
    <li class="active">Data</li>
   </ol>

I did not get the expected results, but it appeared as given below

CompanyName
Administartion
Operations
EmployeeName

Any idea..?

Thanks in advance.

Answer 1

You have the ng-repeat on the ol. You want to place it on the li. You're creating a new ordered list for each item in the array. Like this:

    <ol class="breadcrumb" >
  <li ng-repeat="breadCrumb in breadCrumbs"><a href="">{{breadCrumb}} </a></li>
</ol>