Adding a Directive to a Controller using "Controller as" syntax - angularjs

Question

I have been learning about the kind of "new" "Controller as" syntax. While I find that the syntax is clearer for readability sometimes to do a relative simple thing it just gets more complicated, for example when adding a Directive to a Controller.
How would this simple sample be done with the "Controller As" syntax?
Plunk Sample
I tried something like this:
app.directive('myCustomer', myCustomer);
function myCustomer() {
return {
restrict: 'E',
scope:{ customer: '=info'},
//templateUrl: 'my-customer.html',
template:'Name: {{vm.customer.name}} Address: {{vm.customer.address}}',
controller: Controller,
controllerAs: 'vm',
bindToController: true
};
}
I don't quite get it to work just as the regular "$scope" syntax. Maybe I am missing something.
Note: The sample uses Angular 1.5.5

Answer 1

Check this fork of your plunk: https://plnkr.co/edit/7iA3JMhuUlvIQN9ORs81?p=preview
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customerInfo: '=info'
},
controllerAs: 'vm',
controller: ['$scope', function(scope){
console.log(scope.customerInfo);
}],
templateUrl: 'my-customer-iso.html'
};
});
UPD
code should be like so:
(function(angular) {
'use strict';
angular.module('docsIsolateScopeDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
$scope.igor = { name: 'Igor', address: '123 Somewhere' };
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customerInfo: '=info'
},
controllerAs: 'vm',
bindToController: true, //the missing line!!
controller: 'dirCtrl',
templateUrl: 'my-customer-iso.html'
};
})
.controller('dirCtrl', ['$scope', dirCtrl]);
function dirCtrl() {
//var vm = this; //no need in this!
}
})(window.angular);
and
Name: {{vm.customerInfo.name}} Address: {{vm.customerInfo.name}}
in the template

Answer 2

I din't manage to fully replicate the initial example from the official angular docs. Directives are quite tricky and I was missing something important about the Isolate Scope "=". I was not getting the value from the controller through the directive with the "=" as the original docs example. #shershen's answer is the right one.
(function() {
'use strict';
var app= angular.module('docsIsolateScopeDirective', []);
app.controller('Controller', [function() {
var vm=this;
vm.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
vm.igor = { name: 'Igor', address: 'Homeless' };
vm.name="John";
}]);
app.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
},
templateUrl: 'my-customer-iso.html',
controller: 'Controller',
link: function(scope, elem, attr, ctrl) {
var variableName=attr.info;
scope.customerInfo=ctrl[variableName];
}
};
});
})();
Here is the final plunk.