Q: How to use $event only for parent element in Angular JS? I have HTML code with ng-click event:
<div class="btn share" ng-click="do($event)">
   <span">1</span>
</div>

Angular JS:
$scope.do = function (event) {
  var target = angular.element(event.target);
  var parsed = parseInt(target.find('span').text(), 10);
}

When I click to element div or child element span is called event do().
But if I click on span my counter inside span is not increment. Only by clicking parent element div.
How I can set same $event for div and span elements?

A: I would recommend to work with scope bindings instead of DOM textContent:
<div class="btn share" ng-click="do()">
   <span>{{count}}</span>
</div>

and in controller
$scope.count = 0;
$scope.do = function () {
    $scope.count++;
};

If you however still want to know why it failed with your approach, it's because you need to use currentTarget, not just target:


angular.module('demo', []).controller('MainCtrl', function($scope) {
    $scope.do = function(event) {
        var target = angular.element(event.currentTarget);
        var parsed = parseInt(target.find('span').text(), 10);
        target.find('span').text(parsed + 1);
    };

});
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>

<div ng-app="demo" ng-controller="MainCtrl" class="btn share" ng-click="do($event)">
    <span>1</span>
</div>



But don't do this, controller should not work with DOM at all, this is
  not what controllers are for.


A: You're doing it the wrong way. Angular is not jQuery. You shouldn't do any DOM manipulation in the controller. The view should be generated based on the model, and not vice-versa.
The code should be
<div class="btn share" ng-click="do()">
    <span>{{ counter }}</span>
</div>

and in the controller:
$scope.counter = 1;
$scope.do = function() {
    doSomethingWithCounter($scope.counter);
}


A: Have you tried adding the same click event to your span also?
Like this
<span ng-click="do($event)"> 1 </span>

