AngularJS Isolate Scope

HTML

<div ng-app='isolate'>
  <h3>Outer Scope</h3>

  <input type="text" ng-model="myModel" />
  <p>msg: {{ msg }}</p>
  <h3>Inner Scope</h3>

  <div id="inner">
    <div my-directive
         at="{{ myModel }}"
         equals="myModel"
         ampersand="msg = msg + ' click' "></div>
  </div>
</div>

CSS

</style>< !-- Ugly Hack to make remote files preload in jsFiddle --><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script><style>#inner {
  display: table;
}

#inner label {
  clear: both;
  float: left;
  font-weight: bolder;
  width: 45px;
  text-align: right;
  margin-right: 5px;
}

#inner input {
  clear: right;
  float: left;
}

JavaScript

angular.module('isolate', [])
  .directive('myDirective', function() {
    return {
      template: '<label>@attr</label><input value="{{ myAt }}" />' +
        '<label>@</label><input value="{{ at }}" />' +
        '<label>=attr</label><input ng-model="myEquals" />' +
        '<label>=</label><input ng-model="equals" />' +
        '<label>&attr</label><input type="button" ng-click="myAmpersand()" value="Btn" />' +
        '<label>&</label><input type="button" ng-click="ampersand()" value="Btn" />',
      scope: {
        myAt: '@at',
        myEquals: '=equals',
        myAmpersand: '&ampersand',
        at: '@',
        equals: '=',
        ampersand: '&'
      }
    };
  });