AngularJS ng-click on li icon

Question

I have this code

<div  ng-repeat="names in mitypes  = (mitype | filter:{parentid:0}:true)"> 

    <li ng-click="newObject[names.id]=!newObject[names.id]">
      <label ng-click="selectedlist[names.id]=!selectedlist[names.id]">{{names.id}}  </label>
    </li>

    </div>
   </div>

Its tree of ul li elements. So i want to have 2 any event of click: 1. Click li ng-click for open/close tree branch 2. Click label ng-click for select tree node

li element have css style:

li {
  list-style-type: none; 
  background-repeat: no-repeat;
  background-position: left center;
}
li.closed
{
  background-image: url(1.png);
}
li.opend
{
  background-image: url(2.png);
}

I want click on png image for open/close and label for select node. Now, when you click on any part of the "li" both variables change their meaning.

How can I split these events? thanks in advance...

Answer 1

This is standard event propagation behavior in browsers.

Try $event.stopPropagation on your <label>:

<label ng-click="selectedlist[names.id]=!selectedlist[names.id]; $event.stopPropagation()">{{names.id}}  </label>

If you want want to open when clicking left at the number, add padding-left to <li>:

li {
 list-style-type: none; 
 background-repeat: no-repeat;
 background-position: left center;
 border: 1px solid white;
 border-radius:5px;
 background-color:lightblue;
 padding-left: 30px; //add padding
}

DEMO