directiveScopeParameterExample.js

angular
  .module('myApp', [])
  .controller('MyController', MyController)
  .controller('MyDirectiveController', MyDirectiveController)
  .directive('myAwesomeDirective', myAwesomeDirective);
  
function MyController() {
  var vm = this;
  
  vm.myValue = 'Initial Value';
  
  vm.updateValue = function(value) {
    vm.myValue = value;
  };
}

function MyDirectiveController() {
  var vm = this;
  vm.buttonClick = function() {
    var value = vm.directiveValue.toUpperCase();
    // Note: param is `valueToUpdate` not `value` since we
    // defined it as `valueToUpdate` in the html parameter
    vm.updateFunction({valueToUpdate: value});
  }
}

function myAwesomeDirective() {
  var template = '<input class="form-control" type="text" ng-model="vm.directiveValue">';
  template += '<button class="btn btn-warning" ng-click="vm.buttonClick()">Update!</button>';
  return {
    restrict:         'E',
    controller:       'MyDirectiveController',
    controllerAs:     'vm',
    bindToController: true,
    scope:            {
        updateFunction: '&'
    },
    template: template
  };
}