Angular + Bootstrap Toggling Radio Buttons - angularjs

Question

I'm trying to create a set of radio buttons that I want to exhibit toggling behavior (i.e., the selected button should be highlighted). I'm using the following partial template:
<h3>{{fullAddress()}}</h3>
<h4 class="control-label">Result of Visit</h4>
<pre>{{visit}}</pre>
<div class="btn-group" data-toggle="visitState">
<div ng-repeat="option in visitOptions()" class="btn btn-default" ng-value="option.Value" ng-model="$parent.visit">
{{option.Label}}
</div>
</div>
The controller is quite simple:
app.controller("visitCtrl", function($scope, dataContext) {
var _visit = "NotHome";
$scope.visit = "NotHome";
$scope.visitOptions = function() {
return dataContext.visitOptions();
};
$scope.fullAddress = function() {
var home = dataContext.home();
var pin = dataContext.pin();
if( home.Unit == "" ) return pin.StreetAddress;
return pin.StreetAddress + " #" + home.Unit;
};
});
dataContext.visitOptions() just returns an array of {Label, Value} objects.
As things stand, there is no toggling behavior. Then again, the model value (visit) doesn't update when you click any of the buttons, either :).

Answer 1

For the benefit of others, there were two problems with my code:
I was including jQuery, which conflicts with the toggling behavior. I had to remove jQuery and include ui-bootstrap to replace the event-driven functionality bootstrap depends uses.
Tying ng-model to a "root-level" property (i.e., $scope.visit) keeps the auto-updating/two-way data binding functionality of angular from working. I had to tie ng-model to visit.result instead:
$scope.visit = {
result: "NotHome",
hadQuestion: false,
notes: null,
};
The final markup was pretty simple:
<div class="btn-group" data-toggle="visitState">
<div ng-repeat="option in visitOptions()" class="btn btn-primary" btn-radio="option.Value" ng-model="visit.result">
{{option.Label}}
</div>
</div>