title: AngularJS: How to prevent ng-click to target child elements
body: <p>I have a tree structure that contains a folder as parent and files as children, but the same folder can also contain another folder as a child. At the first time the only visible items are the folders that can be clicked to see their files.</p>
  
  <p>My problem is that when I click on the parent folder the child folder gets expanded too and I want to only see the files of the clicked folder.</p>
  
  <p>For example (<a href="https://jsfiddle.net/qvvdqyh2/2/" rel="nofollow">JSFIDDLE</a>) when I click on <code>parent folder</code> I don't want the <code>child folder</code> to be also expanded until I click on it.</p>
  
  <p>This is my code (the code structure must not be changed):</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"&gt;&lt;/script&gt;
  &lt;div ng-app&gt;
    &lt;div class="folder-group"&gt;
      &lt;span class="folder-title" ng-click="openFolder=!openFolder"&gt;
        &lt;i class="fa {{openFolder ? 'fa-chevron-down' : 'fa-chevron-right'}}"&gt;&lt;/i&gt;
        &lt;i class="fa fa-folder-o"&gt;&lt;/i&gt;
        folder parent
      &lt;/span&gt;
      &lt;ul ng-show="openFolder"&gt;
        &lt;li&gt;file1&lt;/li&gt;
        &lt;li&gt;file2&lt;/li&gt;
        &lt;li&gt;file3&lt;/li&gt;
        &lt;li&gt;file4&lt;/li&gt;
        &lt;li class="children-folder"&gt;
          &lt;span class="folder-title" ng-click="openFolder=!openFolder"&gt;
            &lt;i class="fa {{openFolder ? 'fa-chevron-down' : 'fa-chevron-right'}}"&gt;&lt;/i&gt;
            &lt;i class="fa fa-folder-o"&gt;&lt;/i&gt;
            folder children
          &lt;/span&gt;
          &lt;ul ng-show="openFolder"&gt;
            &lt;li&gt;file1&lt;/li&gt;
            &lt;li&gt;file2&lt;/li&gt;
            &lt;li&gt;file3&lt;/li&gt;
            &lt;li&gt;file4&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the original template:</p>
  
  <pre><code>&lt;span class="folder-title" ng-click="get_menu_items(folder); openFolder =! openFolder;"&gt;
      &lt;i class="fa {{openFolder ? 'fa-chevron-down' : 'fa-chevron-right'}}"&gt;&lt;/i&gt;
      &lt;i class="fa fa-folder-o"&gt;&lt;/i&gt;
      {{ folder.name }}
  &lt;/span&gt;
  &lt;ul ng-show="openFolder"&gt;
      &lt;li class="item" ng-repeat="file in folder.files"&gt;
          &lt;label&gt;
              &lt;input class='file-list-item' type="checkbox" name="file_map[]" value="{{ file.id }}" ng-model="file_map[file.id]" ng-click="update_selection($event)" /&gt;
              &lt;i class="fa fa-file-o"&gt;&lt;/i&gt;
              &lt;span&gt;{{ file.name }}&lt;/span&gt;
          &lt;/label&gt;
      &lt;/li&gt;
      &lt;li menuitem ng-repeat="folder in folder.folders" ng-model="folder"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  scope.get_menu_items = function(folder) {
      folders_service.get_sub_folders(folder, false, function(folders, files) {
      }, function(err, status) {
          scope.handle_top_level_errors(err, status);
      });
  }
  </code></pre>