Darndest problem, and I'm not sure where it lies. (All variable names below insanitized to protect the guilty)

If I have an ng-click on an ng-repeated item inside a ui bootstrap dropdown toggle that uses a bound property, the ng-click doesn't fire.

Here I'm trying to pass the items Code property to a function.

<div class="btn-group">
    <a class="btn btn-inverse dropdown-toggle" >Copy to <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li ng-repeat="jigger in Thingies">
            <a ng-click="cloneItemTo('{{jigger.Code}}');">{{jigger.Name}}</a>
        </li>
    </ul>
</div>

If however I have an ng-click that uses a hardcoded value, the ng-click fires. Here I'm hardcoding the 'xxx' in place of where I'd like the items Code property used.

<div class="btn-group">
    <a class="btn btn-inverse dropdown-toggle" >Copy to <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li ng-repeat="jigger in Thingies">
            <a ng-click="cloneItemTo('xxx');">{{jigger.Name}}</a>
        </li>
    </ul>
</div>

Here's the interesting bit of the controller

$scope.Thingies = [
   {"ID": 1,"Code": "itemone",    "Name": "Item One"}
  ,{"ID": 2,"Code": "itemtwo",    "Name": "Item Two"}
  ,{"ID": 3,"Code": "itemthree",  "Name": "Item Three"}
  ,{"ID": 5,"Code": "whereisfour","Name": "Item Five"}
];

$scope.cloningto = 'nowhere';

$scope.cloneItemTo = function(newType) {
    $scope.cloningto = newType;
}

I've stripped everything back to bare bones and created a Plunkr and the problem still persists.

Anyone know what I'm doing wrong, or any workarounds?

Darndest problem, and I'm not sure where it lies. (All variable names below insanitized to protect the guilty)

If I have an ng-click on an ng-repeated item inside a ui bootstrap dropdown toggle that uses a bound property, the ng-click doesn't fire.

Here I'm trying to pass the items Code property to a function.

<div class="btn-group">
    <a class="btn btn-inverse dropdown-toggle" >Copy to <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li ng-repeat="jigger in Thingies">
            <a ng-click="cloneItemTo('{{jigger.Code}}');">{{jigger.Name}}</a>
        </li>
    </ul>
</div>

If however I have an ng-click that uses a hardcoded value, the ng-click fires. Here I'm hardcoding the 'xxx' in place of where I'd like the items Code property used.

<div class="btn-group">
    <a class="btn btn-inverse dropdown-toggle" >Copy to <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li ng-repeat="jigger in Thingies">
            <a ng-click="cloneItemTo('xxx');">{{jigger.Name}}</a>
        </li>
    </ul>
</div>

Here's the interesting bit of the controller

$scope.Thingies = [
   {"ID": 1,"Code": "itemone",    "Name": "Item One"}
  ,{"ID": 2,"Code": "itemtwo",    "Name": "Item Two"}
  ,{"ID": 3,"Code": "itemthree",  "Name": "Item Three"}
  ,{"ID": 5,"Code": "whereisfour","Name": "Item Five"}
];

$scope.cloningto = 'nowhere';

$scope.cloneItemTo = function(newType) {
    $scope.cloningto = newType;
}

I've stripped everything back to bare bones and created a Plunkr and the problem still persists.

Anyone know what I'm doing wrong, or any workarounds?

• javascript
• twitter-bootstrap
• angularjs

2 Answers 2

Change line:

<a ng-click="cloneItemTo('{{jigger.Code}}');">{{jigger.Name}}</a>

to:

<a ng-click="cloneItemTo(jigger.Code);">{{jigger.Name}}</a></li>

Hope it will help,

Replace this cloneItemTo('{{jigger.Code}}'); with this cloneItemTo(jigger.Code); it worked for me in your Plunkr