AngularJS: Как предотвратить щелчок ng для целевых дочерних элементов

У меня есть древовидная структура, содержащая папку как родительскую и файлы как дочерние, но одна и та же папка также может содержать другую папку в качестве дочернего элемента. В первый раз единственными видимыми элементами являются папки, которые можно щелкнуть, чтобы просмотреть их файлы.

Моя проблема в том, что когда я нажимаю на родительскую папку, дочерняя папка также расширяется, и я хочу видеть только файлы в папке с кликом.

Например (JSFIDDLE), когда я нажимаю на parent folder я не хочу, чтобы дочерняя child folder также расширялась, пока я не нажму на нее.

Это мой код (структура кода не должна изменяться):

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app>
  <div class="folder-group">
    <span class="folder-title" ng-click="openFolder=!openFolder">
      <i class="fa {{openFolder ? 'fa-chevron-down' : 'fa-chevron-right'}}"></i>
      <i class="fa fa-folder-o"></i>
      folder parent
    </span>
    <ul ng-show="openFolder">
      <li>file1</li>
      <li>file2</li>
      <li>file3</li>
      <li>file4</li>
      <li class="children-folder">
        <span class="folder-title" ng-click="openFolder=!openFolder">
          <i class="fa {{openFolder ? 'fa-chevron-down' : 'fa-chevron-right'}}"></i>
          <i class="fa fa-folder-o"></i>
          folder children
        </span>
        <ul ng-show="openFolder">
          <li>file1</li>
          <li>file2</li>
          <li>file3</li>
          <li>file4</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Это оригинальный шаблон:

<span class="folder-title" ng-click="get_menu_items(folder); openFolder =! openFolder;">
    <i class="fa {{openFolder ? 'fa-chevron-down' : 'fa-chevron-right'}}"></i>
    <i class="fa fa-folder-o"></i>
    {{ folder.name }}
</span>
<ul ng-show="openFolder">
    <li class="item" ng-repeat="file in folder.files">
        <label>
            <input class='file-list-item' type="checkbox" name="file_map[]" value="{{ file.id }}" ng-model="file_map[file.id]" ng-click="update_selection($event)" />
            <i class="fa fa-file-o"></i>
            <span>{{ file.name }}</span>
        </label>
    </li>
    <li menuitem ng-repeat="folder in folder.folders" ng-model="folder"></li>
</ul>


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);
    });
}