title: ANGULAR JS - does not show the submenu when using version 1.2.1
body: <p>I just want to ask why the submenu of this menu bar are not showing when i used the 1.2.1 angular.js. but in 1.1.1 is show perfectly.</p>
  
  <p>this is the fiddle of the menu bar: here <a href="http://jsfiddle.net/kmussel/evXFZ/" rel="nofollow">http://jsfiddle.net/kmussel/evXFZ/</a>?
      'use strict';</p>
  
  <pre><code> var app = angular.module('App', []);
  
  
   app.controller('NavCtrl', ['$scope', '$location', function ($scope, $location) {
     $scope.breadcrumbs = [];
     $scope.menu =   [
           {text: 'HOME', href:'/app/index.html', children: [
               {text:'MANAGE Dashboard', href:'/dashb'}
             ]
             },
           {text: 'MANAGE', href:'/manage', children: [
             {text:'MANAGE PEOPLE', href:'/manage-people', children: [
                 {text:'MANAGE STAFF', href:'/manage-staff'},
                 {text:'MANAGE CLIENTS', href:'/manage-clients'}              
               ]}
           ]},
                {text: 'REPORTS', href:'/reports', children: [
                  {text: 'REPORT NUMERO UNO', href: '#'},
             {text: 'REP NUMERO 2', href: '#', children: [{text:'Third Tier', href: '#'},                     {text:'Another Third Tier', href: '#', children: [
                 {text:'SUB SUB NAV', href:'#'}
               ]}]}
           ]},
           {text: 'MY INFO', href:'/my-info' },
         ]
  
  
   }]);
  
  
   /* Directives */
  
  
   app.directive('navMenu', ['$parse', '$compile', function($parse, $compile) {
       return {
           restrict: 'C', //Element
           scope:true,
           link: function (scope, element, attrs)
           {
               scope.selectedNode = null;
  
               scope.$watch( attrs.menuData, function(val)
               {
  
              var template = angular.element('&lt;ul id="parentTreeNavigation"&gt;&lt;li ng-          repeat="node in ' + attrs.menuData + '" ng-class="{active:node.active &amp;&amp; node.active==true,      \'has-dropdown\': !!node.children &amp;&amp; node.children.length}"&gt;&lt;a ng-href="{{node.href}}" ng-     click="{{node.click}}" target="{{node.target}}" &gt;{{node.text}}&lt;/a&gt;&lt;sub-navigation-tree&gt;     &lt;/sub-navigation-tree&gt;&lt;/li&gt;&lt;/ul&gt;');
  
                   var linkFunction = $compile(template);
                   linkFunction(scope);
                   element.html(null).append( template );
  
               }, true );
           }
       };
   }])
   .directive('subNavigationTree', ['$compile', function($compile)
   {
       return {
           restrict: 'E', //Element
           scope:true,
           link: function (scope, element, attrs)
      {
          scope.tree = scope.node;
  
               if(scope.tree.children &amp;&amp; scope.tree.children.length )
               {
              var template = angular.element('&lt;ul class="dropdown "&gt;&lt;li ng-repeat="node in      tree.children" node-id={{node.' + attrs.nodeId + '}}  ng-class="{active:node.active &amp;&amp;      node.active==true, \'has-dropdown\': !!node.children &amp;&amp; node.children.length}"&gt;&lt;a ng-href="     {{node.href}}" ng-click="{{node.click}}" target="{{node.target}}" ng-bind-html-     unsafe="node.text"&gt;&lt;/a&gt;&lt;sub-navigation-tree tree="node"&gt;&lt;/sub-navigation-tree&gt;&lt;/li&gt;&lt;/ul&gt;');
  
              var linkFunction = $compile(template);
              linkFunction(scope);
              element.replaceWith( template );
          }
          else
          {
              element.remove();
          }
           }
        };
   }]);
  </code></pre>
  
  <p>Thank You in advance. =)</p>