Angular populate Bootstrap modal form from controller data - angularjs

Question

I am trying to populate a modal form with data passed in from my controller. The data being displayed is always NULL, even though I have populated the data in the controller.
I have been trying to work this out and have tried a few different ways to do it but none work.
The examples I have seen use $scope, but I don't want to use $scope and instead use controller as
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
(function () {
'use strict';
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($uibModal, $log) {
var vm = this;
vm.vehicle = [{
vehicleRegistration: null,
createUser: null
}];
vm.open = function (size) {
vm.vehicle[0]["vehicleRegistration"] = 'ABCDEFG';
vm.vehicle[0]["createUser"] = 'BOBF';
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: 'lg',
resolve: {
items: function () {
return vm.vehicle;
}
}
});
};
});
})();
(function () {
'use strict';
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
var vm = this;
// I want to get the vehicle data pass to populate the form myModalContent.html
vm.vehicle = items;
});
})();
Any ideas?
Here is http://plnkr.co/edit/grHKGEJeKqoR8VHOW8I6?p=preview

Answer 1

First, use another name than vm for the modal. I've set it to vm2, also when defining the modal, you have to set the alias for the controller using the word as like this:
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl as vm2',
size: 'lg',
resolve: {
items: function () {
return vm.vehicle;
}
}
});
Check the link: http://plnkr.co/edit/JmCL6NjAmd2b1UPR8649