binding information in a HTML element - angularjs

Question

I have a http.get that returns an Array of Applications
<div id ="app" ng-repeat="app in applications" >
<carddata-toggle="modal" data-target="#myModal" ></card>
</div>
For each of them, i create a card (custom directive...think google now cards) and add a bootstrap modal to them. The idea being you can then click on each card and get more info about that specific app.
In the code for my Modal, I want to retrieve information about the app (for example the app name). As this is outside the for loop, Angular has lost track of my app name and therefore throws an error.
<div class="modal modal-fullscreen fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">{{app.name}} Status</h4>
</div>
I have read through the angular Api... I was looking for a way to "bind" the app name to the modal so it is aware of it, but couldn't see anything suitable. I'm new to Angular and I am therefore probably not approaching it right.
How would you approach this?

Answer 1

I would suggest to use Angular UI's modal service (have a look at https://angular-ui.github.io/bootstrap/#/modal).
In your controller (where you load your array of applications), inject $uibModal, e.g.
angular.module('myApp').controller('myCtrl', function ($scope, $uibModal) {
$scope.applications = [];
$scope.openModal = function(app) {
$uibModal.open({
controller: 'ModalInstanceCtrl',
templateUrl: 'myModalContent.html',
resolve: {
app: function() {
return app;
}
}
});
}
});
Then define the controller for the modal itself.
// This is the controller for the modal itself
// `app` being passed through the resolve parameter in $uibModal.open()
angular.module('myApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, app) {
$scope.app = app;
$scope.ok = function () {
$uibModalInstance.close();
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
You can define your modal template by putting the following in your view:
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">{{ app.title }}</h3>
</div>
<div class="modal-body" id="modal-body">
Modal body content
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
I've avoided the controllerAs syntax as you did seem to use $scope in your example.

Answer 2

In your view
<div id ="app" ng-repeat="app in applications" >
<carddata-toggle="modal" data-target="#myModal" ng-click="setApp(app)"></card>
</div>
<h4 class="modal-title" id="myModalLabel">{{selectedApp.name}} Status</h4>
In your controller
$scope.setApp = function(appParam){
$scope.selectedApp = appParam;
}