Как интерполировать текст из input. Angular

angular.module('app', [])
  .directive('inputByEnter', inputByEnter)

function inputByEnter() {
  return {
    templateUrl: 'example.html',
  }
}

angular.bootstrap(
  document.getElementById('root'), ['app']
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-oAOxQR6DkCoMliIh8yFnu25d7Eq/PHS21PClpwjOTeU2jRSq11vu66rf90/cZr47" crossorigin="anonymous">


<div id="root">
  <input-by-enter></input-by-enter>

  <script type="text/ng-template" id="example.html">
    <form class="pure-form">
      <fieldset>
        <legend>Save value after enter</legend>

        <input 
          type="text" 
          placeholder="Some string"
          ng-model="tempValue"
          ng-model-options="{updateOn : 'change blur'}"
        >
      </fieldset>
    </form>
    <h2>Saved value: <span ng-bind="tempValue"></span></h2>
  </script>
</div>