How to invoke a modal from a controller in angularjs / ui-bootstrap? - angularjs

Question

I am trying to display a modal (Note view) from a controller (Details controller). I have separate controllers tied to each view.
The Details view has a list of radio buttons and upon selecting a radio button, it needs to display a modal with some data and OK and Cancel buttons.
Also, I need to deselect the radio button which is selected in Details view when cancel button is clicked on the modal.
How can I wire up all this? I am trying the below code and I get internal server error upon calling note modal from Details controller.
I copied some parts from my code to show what I am trying.
Thanks for any suggestions.
Details view:
<div class="list-group-item" ng-repeat="cpo in details.detailoptions">
<div class="row">
<h4><input type="radio" name="optRadio" ng-model="$parent.selectedOption"
ng-value="{{o}}" ng-change="optionSelected()"
ng-disabled="disableOptions" /></h4>
</div>
</div>
Details controller:
appControllers.controller('detailsCtrl', ['$scope', '$uibModal',
function ($scope, $uibModal) {
$scope.selectedOption;
$scope.optionSelected = function () {
//call note modal
$uibModal.open({
templateUrl: 'notePanel',
controller: 'noteCtrl',
scope: $scope
});
}
}
]);
Note view:
<script type="text/ng-template" id="notePanel" ng-controller="noteCtrl">
<div id="noteModal" class="modal fade">
<div class="modal-dialog">
<div class="form-group">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h4>{{Note.Note1}}</h4>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-offset-1 col-md-10">
{{Note.Note2}}
</div>
</div>
</div>
<div class="panel-footer clearfix">
<div class="row row-centered">
<div class="col-xs-3 col-thin col-centered">
<button type="submit" class="btn btn-primary btn-block" data-dismiss="modal" ng-click="OK()"><span class="glyphicon glyphicon-ok"></span> Agree</button>
</div>
<div class="col-xs-3 col-thin col-centered">
<button type="button" class="btn btn-default btn-block" ng-click="Cancel()"><span class="glyphicon glyphicon-remove"></span> Disagree</button>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
Note controller:
appControllers.controller('noteCtrl', ['$scope', 'dataService',
function ($scope, service) {
$scope.Note;
$scope.OK = function () {
//close modal
}
$scope.Cancel = function () {
//deselect the option selected in Details view.
}
function init() {
service.getNote($scope.optionSelected, function (data) {
if (data) {
$scope.Note = data;
}
else {
console.log('Error getting note file');
//show error dialog
}
});
}
init();
}
]);