<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>angularJS directive example</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="app">
    <div class="col-md-5 col-md-offset-1">

      <h3>Outer Value</h3>
      Outer Value: <input type="text" ng-model="outerVal"><br>
      <br></br>

      <example-directive val-through-at="{{outerVal}}">
        <h3>Value through @</h3>
      </example-directive>
      <br>

      <example-directive val-through-equals="outerVal">
        <h3>Value through =</h3>
      </example-directive>

    </div>
  </body>
</html>
var app = angular.module('app', []);

app.directive('exampleDirective', function() {
   return {

       template: `
         <div class="panel panel-primary">
             <div ng-transclude></div>
             Value through @: <input type="text" ng-model="valThroughAt">
             <br></br>

             Value through =: <input type="text" ng-model="valThroughEquals">
             <br></br>

         </div>
       `,

       transclude: true,

       scope: {
         valThroughEquals: '=',
         valThroughAt: "@"
       },

   }
});