Strange Ionic Framework behavior with ng-repeat

I have an ng-repeat with a button inside which calls a controller method. I'm using the Ionic Framework which is based on AngularJS I can't get the button to actually trigger the controller method unless I revert to using plain Angular (or one more variant, which I will show later).

My example of the broken situation can be seen here in jsfiddle.

You can see that the red button works (generates an alert) and the green, inside the ng-repeat doesn't, while it is calling the exact same controller function.

Here is the controller code:

angular.module('todoApp', [])
.controller('TodoController', ['$scope', function($scope) {

var answers = [];
addOptionToArray("Option 1");
addOptionToArray("Option 2");
addOptionToArray("Option 3");
$scope.answers = answers;

$scope.doSomething = function() {
  alert("clicked");
};

function addOptionToArray(optionText) {
  answers.push({text : optionText});
} 
}]);

and the page layout:

<div ng-app="todoApp">

<div ng-controller="TodoController">
<button class="button button-assertive"  ng-click="doSomething()">
    <i class="icon ion-minus-circled"></i>
</button>

<label class="item item-input item-button-right" ng-repeat="answer in answers">
<input type="text" ng-model="answer.text">
<div class="buttons">
  <button class="button button-balanced" ng-click="doSomething()">
    <div>click</div>
  </button>
</div>
</label>
</div>
</div>

Now there are two thins that will make the button inside the ng-repeat work again

  1. Replace the Ionice bundle JS reference with a pure `AngularJS' one as can be seen here in jsfiddle
  2. While keeping the Ionic JS reference, remove the <input>' inside the ng-repeat see jsfiddle

Any idea of why having the <input> inside the ng-repeat breaks the button's ng-click?
Or what is broken in Ionic?

Your problem is with block elements inside inline elements. Don't put <div> inside <button> or <label>. Fix it and it works as expected:

<div ng-app="todoApp">
    <div ng-controller="TodoController">
        <a href="#" class="button button-assertive" ng-click="doSomething()"><i class="icon ion-minus-circled"></i></a>
        <div class="item item-input item-button-right" ng-repeat="answer in answers">
            <input type="text" ng-model="answer.text" />
            <div class="buttons">
                <a href="#" class="button button-balanced" ng-click="doSomething()">Click</a>
            </div>
        </div>
    </div>
</div>