角度チェックボタンの動作が間違っている

Question

私はここに（おそらく）スコープの大きな問題がありますが、私はそれを見ることができません。私は他のボタンはすでに、私はこのサイトからそれを採用しようとしたそうであるように私自身のCSS-修正tooglebuttonsは、同じように動作させたい

：

http://jsfiddle.net/opensas/ye6At/

は、ここに私の私ですフィドル：

http://jsfiddle.net/fs0tL62s/

私の第二ボタンが値に反応しているが、私は異なり、それを制御することはできません。

Thxです。 私のCSS：

 .onoffswitch { 
    position: relative; 
    width: 92px; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
} 

.onoffswitch-checkbox { 
    display: none; 
} 

.onoffswitch-label { 
    display: block; 
    overflow: hidden; 
    cursor: pointer; 
    border: 2px solid #999999; 
    border-radius: 20px; 
} 

.onoffswitch-inner { 
    display: block; 
    width: 200%; 
    margin-left: -100%; 
    transition: margin 0.3s ease-in 0s; 
} 

.onoffswitch-inner:before, 
.onoffswitch-inner:after { 
    display: block; 
    float: left; 
    width: 50%; 
    height: 30px; 
    padding: 0; 
    line-height: 30px; 
    font-size: 12px; 
    color: white; 
    font-family: Trebuchet, Arial, sans-serif; 
    font-weight: bold; 
    box-sizing: border-box; 
} 

.onoffswitch-inner:before { 
    content: "Local"; 
    padding-left: 10px; 
    background-color: #34A7C1; 
    color: #FFFFFF; 
} 

.onoffswitch-inner:after { 
    content: "Remote"; 
    padding-right: 10px; 
    background-color: #EEEEEE; 
    color: #999999; 
    text-align: right; 
} 

.onoffswitch-switch { 
    display: block; 
    width: 22px; 
    margin: 4px; 
    background: #FFFFFF; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 58px; 
    border: 2px solid #999999; 
    border-radius: 20px; 
    transition: all 0.3s ease-in 0s; 
} 

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
    margin-left: 0; 
} 

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
    right: 0px; 
} 

私のJS：

私のコードは次のようである

angular.module('bootstrap', []).directive('button', function() { 
return { 
restrict: 'E', 
require: 'ngModel', 
link: function($scope, element, attr, ctrl) { 

    // ignore other kind of button groups (e.g. buttons-radio) 
    if (!element.parent('[data-toggle="buttons-checkbox"].btn-group').length) { 
    return; 
    } 

    // set/unset 'active' class when model changes 
    $scope.$watch(attr.ngModel, function(newValue, oldValue) { 
    element.toggleClass('active', ctrl.$viewValue); 
    }); 

    // update model when button is clicked 
    element.bind('click', function(e) { 
    $scope.$apply(function(scope) { 
     ctrl.$setViewValue(!ctrl.$viewValue); 
    }); 

    // don't let Bootstrap.js catch this event, 
    // as we are overriding its data-toggle behavior. 
    e.stopPropagation(); 
    }); 
} 
}; 
}); 

angular.module('sample', ['bootstrap']); 

function SampleController($scope) { 
console.log('model'); 
$scope.myModel = { 
}; 
} 

と私のhtml：あなたは、IDの衝突を持って

<div ng-app="sample" ng-controller="SampleController"> 
<ul> 
<li>myModel.optionA:{{myModel.optionA}}</li> 
<li>myModel.optionB: {{myModel.optionB}}</li> 
</ul> 
<form class="form-inline"> 
<label class="checkbox"> 
    <input type="checkbox" ng-model="myModel.optionA"> A 
</label> 
<label class="checkbox"> 
    <input type="checkbox" ng-model="myModel.optionB"> B 
</label> 
</form> 
<div class="btn-group" data-toggle="buttons-checkbox"> 
<button type="button" ng-model="myModel.optionA" class="btn">A</button> 
<button type="button" ng-model="myModel.optionB" class="btn">B</button> 
<div class="onoffswitch"> 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"  
id="myonoffswitch" checked ng-model="myModel.optionB"> 
    <label class="onoffswitch-label" for="myonoffswitch"> 
    <span class="onoffswitch-inner"></span> 
    <span class="onoffswitch-switch"></span> 
    </label> 
</div> 
<div class="onoffswitch"> 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"   
    id="myonoffswitch" checked ng-model="myModel.optionA"> 
    <label class="onoffswitch-label" for="myonoffswitch"> 
    <span class="onoffswitch-inner"></span> 
    <span class="onoffswitch-switch"></span> 
    </label> 
</div> 
</div> 
</div> 

Answer 1

：

変更最後のボタンのid（およびそのラベルの "for"属性と一致するラベル）を別のものに置き換えて動作させます。

<div class="onoffswitch"> 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch2" checked ng-model="myModel.optionA"> 
    <label class="onoffswitch-label" for="myonoffswitch2"> 
    <span class="onoffswitch-inner"></span> 
    <span class="onoffswitch-switch"></span> 
    </label> 
</div> 

Updated fiddle