Dynamically adding modal information based on button clicked - angularjs

Question

I'm using AngularUI Modal and AngularUI Router with Bootstrap. I would like to populate the modal title and add an item to the submitted array based on which button a user clicks to initiate the modal. I can statically add this information, but am having trouble figuring out how to add this information dynamically.
[EDIT: Added code for modal below]
Javascript for Controller:
myApp.controller('NewProjectCtrl', function ($scope, $location, $stateParams, Projects, $modalInstance) {
var editProject = this;
editProject.title = 'Modal 1'; // This title should change based on which button is clicked
editProject.save = function () {
editProject.project.type = {type: 'Basic'}; //This item should change based on which button is clicked.
$modalInstance.close(editProject.selected);
Projects.$add(editProject.project).then(function(data) {editProject.projects.$save({ type: 'Basic' }); //'Basic' should change based on which button is clicked.
});
};
editProject.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
Javascript for Modal:
.state('selection.new', {
url: '/new',
onEnter: ['$stateParams', '$state', '$modal', function ($stateParams, $state, $modal) {
$modal.open({
templateUrl: 'views/new-mark.html',
controller: 'NewProjectCtrl as editProject',
})
.result.finally(function () {
$state.go('^');
});
}]
})
HTML:
<!-- HTML for button that triggers modal 1 -->
<a ui-sref="selection.new">
<button type="button" class="btn btn-primary btn-lg" ng-click="open()">Select</button>
</a>
<!-- HTML for modal title -->
<div class="modal-header">
<h3 class="modal-title">{{editProjects.type}}</h3>
</div>

Answer 1

You can define options to pass into the modal instance like this:
JS to open modal:
$modal.open({
templateUrl: 'views/new-mark.html',
controller: 'NewProjectCtrl as editProject',
resolve: {
dialogOptions: function() {
return {
title: $stateParams.type === 'Basic' ? 'Basic Title' : 'Advanced Title',
type: $stateParams.type
};
}
}
})
Then inject and use dialogOptions in your modal instance controller:
myApp.controller('NewProjectCtrl', function ($scope, $location, $stateParams, Projects, $modalInstance, dialogOptions) {
var editProject = this;
editProject.title = dialogOptions.title;
editProject.save = function () {
editProject.project.type = dialogOptions.type;
The tricky part is that you're using onEnter for your state to open the dialog. The ng-click="open()" isn't doing anything right? So, maybe add a state parameter to represent the type - you could specify the ui-sref as follows (would need to update the state definition as well):
<a ui-sref="selection.new({type: 'Basic'})">
<a ui-sref="selection.new({type: 'Advanced'})">
State definition change if you set the type as a param in the state:
url: '/new?type',