JSFiddle - React, Tailwind, and code Playground

by provegard

HTML

<div ng-controller="Ctrl1">
  <button ng-click="increment()">
  Increment
  </button>
  <div foobar="object"></div>
</div>

JavaScript

angular
  .module("myApp", [])
	.controller("Ctrl1", function($scope) {
    $scope.object = { cnt: 1 };
    $scope.increment = function () {
    	$scope.object = { cnt: $scope.object.cnt + 1 };
    };
  })
  .directive("foobar", function () {
  	return {
      template: function () {
        return "<span>{{__count}}</span>";
      },
			scope: true,
      link: function (scope, element, attrs) {
        console.log("scope id at link time: " + scope.$id);
        scope.$watch(attrs.foobar, function (newValue) {
          console.log("scope id in watch: " + scope.$id);
          scope.__count = newValue.cnt;
        });
      }
    };
  })
	;