Comment faire pour que les groupes de boutons Twitter Bootstrap fonctionnent avec AngularJS?

Je suis en train de créer un simple twitter bootstrap groupe de boutons qui permet à l'utilisateur de sélectionner un ou plusieurs options (pensez à boutons radio). Je l'ai à un point où c'est touchant des modifications sur le modèle, mais à l'état "actif" n'est pas correctement définie onclick...sauf si je clique une deuxième fois?? J'ai créé un violon et la base de balisage suit...

<div range="justified"
    model="myModel"
    options="rangeOptions"></div>
<hr/>
<div range="vertical"
    model="myModel"
    options="rangeOptions"></div>
<hr/>

<pre>myModel:{{myModel}}</pre>

<script type="text/ng-template" id="range.tpl.html">
    <div class="btn-group btn-group-{{type}}" data-toggle="buttons">
        <span class="btn btn-lg btn-primary"
            ng-repeat="option in options"
            ng-class="{active:option.id==model.range_id}" <!-- not working?? -->
            ng-click="activate(option.id)">{{option.label}}</span>
    </div>
</script>
function Main($scope) {
    $scope.rangeOptions = [
        {id:1,label:"Agree"},
        {id:2,label:"Neutral"},
        {id:3,label:"Disagree"}
    ];
    $scope.myModel = {range_id: 2};
}
angular
    .module('range', [])
    .directive('range', function () {
        return {
            replace: true,
            scope: { type:'@range', model:'=', options:'=' },
            templateUrl:'range.tpl.html',
            controller: function ($scope,$element,$attrs) {
                $scope.activate = function (option) {
                    $event.preventDefault();
                };
            }
        };
    });

source d'informationauteur Brian