JSFiddle - React, Tailwind, and code Playground

by Jason Villalon

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://demo.onokumus.com/metisMenu/demo.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://demo.onokumus.com/metisMenu/jquery.metisMenu.js"></script>
<div class="clearfix" ng-app="Application" ng-controller="Ctrl">
  <aside class="sidebar">
    <nav class="sidebar-nav">
      <ul side-menu="menus" id="menu2">
          <li class="active" ng-repeat="menu in menus">
              <a href="#">{{menu.name}}<span class="fa arrow"></span></a>
              <ul>
                  <li ng-repeat="submenu in menu.submenu"><a href="#">{{submenu.name}}</a></li>
              </ul>
          </li>
      </ul>
     </nav>
  </aside>
    <button ng-click="updateData()">Update</button>
</div>

JavaScript

angular.module('myApp',[])
.directive('sideMenu',[function(){
    return {
        link: function(scope, element, attrs){
           // $timeout(function(){
            setTimeout(function(){
                $(element).metisMenu();
            },10);
            
            scope.$watch(scope.menus, function(){
                setTimeout(function(){
                    $(element).metisMenu();
                },10);
            });
            
            scope.$on('test', function(){
                setTimeout(function(){             
                    //scope.$apply(function(){
                        //$(element).metisMenu();
                    //});
                    scope.$apply();
                },10);
            });
        }
    }
}])
.controller('Ctrl',['$scope','$rootScope', function($scope, $rootScope){
    $rootScope.menus = [
        {
            name: 'Menu 2',
            submenu: [
                {
                    name : 'item 2'
                }
            ]
        }
    ];
    $scope.updateData = function(){
        $rootScope.menus = [
        {
            name: 'Menu 1',
            submenu: [
                {
                    name : 'item 1'
                },
                {
                    name : 'item 2'
                },
                {
                    name : 'item 3'
                }
            ]
        },
            {
                name: 'Menu 2',
                submenu: [
                    {
                        name : 'item 2'
                    }
                ]
            }
        ];
        $rootScope.$broadcast('test');
    };
}]);