Untitled

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="MyController as vm">
      <h1>My Value: {{ vm.myValue }}</h1>
      <my-awesome-directive update-function="vm.updateValue(valueToUpdate)">
        
      </my-awesome-directive>
    </div>
  </body>

</html>

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

/* Styles go here */