Angular TRANSACTIONPOINT

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="myCtrl">
      1/ Do some complex work, e.g. enter data: 
      <input type="text" ng-model=userdata />
  
    <hr />
    2/
    <input type=button 
           ng-click="transactions.transactionpoint_1_add()" 
           value="commit transaction">

    <hr />
    3/ VIEW after transaction:<br /><br />
    <my-schizophrenic-view style="background-color:Bisque"
         transactionpoint="transactions.transactionpoint_1"
         datasource="schizophrenicdata()">  <!-- yes, you can delete this message : -->Error, my directive does NOT work!
    </my-schizophrenic-view>
    
    <br /><br /><br /><hr />
    Run without plunker ide:
    <script>document.write('<a href="' + document.location + '">' + document.location + '</a>');</script>
  </body>

</html>

var myApp = angular.module('myApp', []);

myApp.directive('mySchizophrenicView', function() {
  var transactionpoint
  var datasource
  return {
      restrict: 'E',
      link: function (scope, element, attrs) {
              /*yes, you can delete this message :  */ element.html("Hello from view directive! <br /> Yet nothing happend. <br />" + angular.toJson(new Date()))
              transactionpoint = element.attr('transactionpoint');
              datasource = element.attr('datasource');
              // TRANSACTIONPOINT
              if (transactionpoint){
                  scope.$watch(transactionpoint, function(value) {
                        // value > 0 --- this is meant by "following the first transaction", skip initial rendering before first transaction
                        if(value && value > 0 ){ 
                            element.html(scope.$eval(datasource))
                            //optionally COMPILE here, if necessary...
                        }
                  });
              }

      }
  }
  
});

myApp.controller('myCtrl', function ($scope) {
  $scope.transactions = {}
  $scope.transactions.transactionpoint_1 = 0
  //increment transactionpoint after some complex work:
  $scope.transactions.transactionpoint_1_add = function(){
    $scope.transactions.transactionpoint_1++
  }
  $scope.schizophrenicdata = function(){
    //calculate data   OR   build/calculate view/data
    return "<div style='border-style: outset; border-width: 10px;padding:10px;background-color:LightGoldenRodYellow'> received data: <b>" 
          + $scope.userdata 
          + "</b><br />" 
          +  angular.toJson(new Date()) 
          + "</div>"
  }
})

/* Styles go here */