Nested ng-click's in IE9

Question

I need to have a ng-click-event nested into another ng-click-event. This doesn't seem to be a problem in the Chrome client I am able to use here at work, but the standard browser is IE9.

The problem is that clicking on the inner control does not trigger the function corresponding to the inner control, but rather the function of the parent control.

The code looks a little like this:

angular.module('App', [])
       .controller('Controller', function() {
           var self = this;
           
           self.outer_function = function($event) {
             alert('Outer function called');
           }
           self.inner_function = function($event) {
             $event.stopPropagation();
             alert('Inner function called');
           }
       });

.outer {
  border: 1px solid black;
  padding: 10px;
  display: inline-block;
}
.inner {
  margin: 0 10px;
  padding: 5px;
  border: 1px solid red;
  display: inline-block;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App">
  <div ng-controller="Controller as ctrl">
    <button class="outer" data-ng-click="ctrl.outer_function($event)">
      This is the div
      <div class="inner" data-ng-click="ctrl.inner_function($event)">
        Inner div
      </div>
   </button>
  </div>
</div>

Is there anything I am forgetting? Or a workaround to make this work in IE9?
Thanks in advance!