How can i create a ng-repeat Modal bootstrap with angular - angularjs

Question

So I have the following simple JSON in my controller:
var app = angular.module('MyApp', []);
app.controller('loadCtrl', function($scope,$http) {
$scope.buttons=[
{Id:'1', type:'First Button'
},
{Id:'2', type:'2nd Button'
},
{Id:'3', type:'3rd Button'
}
];
});
In my view, I have buttons generated by ng-repeat, and modals attached to each button:
<div ng-app="MyApp" ng-controller="loadCtrl" class="container">
<div ng-repeat="button in buttons" class="btn-group">
<div class="btn btn-sq-lg btn-primary" data-toggle="modal" ng-attr-data-target="{{button.type+'Opts'}}">{{button.type}}
</div>
<!-- Modal -->
<div ng-attr-id="{{button.type+'Opts'}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{button.type}}</h4>
<h5> Record:{{date | date:'yyyy-MM-dd-HH:mm:ss'}}</h5>
</div>
<div class="modal-body">
<textarea name="Reason" class="form-control" rows="5" style="min-width: 100%"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
But for some reason, the modal just does not show up. I tried adding ng-show attribute, but that didn't work either. Somehow the ids aren't being generated properly.

Answer 1

You need to include the id selector '#' in data-target attribute, also for the selector to work button type needs no space.
<div ng-app="MyApp" ng-controller="loadCtrl" class="container">
<div ng-repeat="button in buttons" class="btn-group">
<div class="btn btn-sq-lg btn-primary" data-toggle="modal" data-target="{{'#' + button.type+'Opts'}}">{{button.type}}
</div>
<!-- Modal -->
<div id="{{button.type+'Opts'}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{button.type}}</h4>
<h5> Record:{{date | date:'yyyy-MM-dd-HH:mm:ss'}}</h5>
</div>
<div class="modal-body">
<textarea name="Reason" class="form-control" rows="5" style="min-width: 100%"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Controller :
var app = angular.module('MyApp', []);
app.controller('loadCtrl', ['$scope', '$http', function($scope, $http) {
$scope.buttons = [{
Id: '1',
type: 'FirstButton'
}, {
Id: '2',
type: '2ndButton'
}, {
Id: '3',
type: '3rdButton'
}];
}]);
See working demo here