Untitled

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.6.4" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <div ng-controller="mainController as vm">
      <h1>Hello Plunker!</h1>
      <p>{{vm.text}}</p>
      <text-box textvalue="vm.userInput" loadvalue="vm.onLoadValue()"></text-box>
      <div>controller: <span>{{vm.tempValue}}</span></div>
    </div>
  </body>

</html>

// Code goes here

angular.module("app", []);

angular.module("app").controller("mainController", function(){
  var that = this;
  that.text="test text";
  that.onLoadValue = function(){
    this.tempValue = this.userInput;
    console.log(this.userInput);
  }
});

angular.module("app").directive("textBox", function(){
  return {
    restriction: "E",
    template: `<input ng-model="textvalue", ng-change="vm.onChange()"/>
    <div>directive: <span>{{vm.tempText}}</span></div>`,
    scope: {
      textvalue: "=",
      loadvalue: "&"
    },
    controllerAs: "vm",
    controller: function($scope){
      var that = this;
      that.onChange = function(){
        that.tempText = $scope.textvalue
        $scope.loadvalue({$value: $scope.textvalue});
        console.log($scope.textvalue);
        $scope.loadvalue();
      }
    }
  }
})

/* Styles go here */