how to append li tag into ul in angularjs?

Question

I have a html like this

  <div>
       <div class="submain">
           <div><ul><ul><div>
           <div g-directive>click</div>
       </div>
       <div class="submain">
           <div><ul><ul><div>
           <div g-directive>click</div>
       </div>
       <div class="submain">
           <div><ul><ul><div>
           <div ng-directive>click</div>
       </div>
  <div>

when i click on particular div(click div), i want to append one li tag into the ul tag of before particular clicked div.

i have directive like this, i have tried this but it is not working

app.directive('ngDirective',function()
{
   return function(scope,element,attrs)
   {
      element.bind('click',function()
      {
          element.prev().children('ul').append('<li></li>');

      });
   }

});

how to append li tag into ul that is children of div ?

Answer 1

Just a rough example of what you could do:

HTML

<div>
   <div class="submain">
       <div><ul>
         <li ng-show="showLI">{{content}}</li>
       <ul><div>
       <div ng-click="toggleLI()">click</div>
   </div>
<div>

JS

$scope.showLI = false;
$scope.toggleLI = function() {
    $scope.showLI = !$scope.showLI;
}

Answer 2

Your code doesn't work, because of wrong element selector. .children searches only the first level of children elements, so basically <div class="submain"> doesn't have children element <ul> . You can use .find('ul') instead, it searches the whole tree downwards