JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
<div ng-controller='myCtrl'>
 
     <div id='cssmenu' >
        <ul>
            <li ng-repeat="menus in menuList track by $index" ng-init="Index = $index" class='active has-sub open clickthis'>
                <a><span>{{menus.mainmenu}}</span></a>
                <ul>
                    <li ng-repeat="sub in menus.submenu" class='last'><a>{{sub}}</a></li>
                </ul>
            </li>
        </ul>
    </div>
    
    
</div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<style>

JavaScript

var app= angular.module('myApp',[]);
app.controller('myCtrl', function($scope) {
   
    $(document).on("click",".clickthis",function() {
        alert("THis will work Because you are binding Eventhandler at Document level before DOM renders Menu/submenu.");
    });
    
     $(".clickthis").click(function(){alert('hai... THis will not work because DOM for menu is not ready yet. ');});
    

    $scope.menuList=    [
        {mainmenu:'main1',submenu:['sub1','sub2']},
        {mainmenu:'main2',submenu:['sub1','sub2','sub3']},
        {mainmenu:'main3',submenu:['sub1','sub2','sub3','sub4']},
        {mainmenu:'main4',submenu:['sub1','sub2']}                          
        ];  
        $scope.$apply();
        $('#cssmenu li>ul').slideDown();

    });