JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div id="demo" ng-controller="MyCtrl">
  <status-circle status="obj.status" on-update="save(obj)"></status-circle>
</div>

JavaScript

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

angular.module('myApp').controller('MyCtrl', function($scope) {
  $scope.obj = {
   status: 0
  };
	$scope.save = function(obj) {
    console.log(obj); // status property is old
  };
});

angular.module('myApp').component('statusCircle', {
  template: 'Current {{$ctrl.status}}<ul><li ng-repeat="s in [1, 2, 3]" ng-click="$ctrl.update(s)">Set status to {{s}}</li></ul>',
  bindings: {
    status: '=',
    onUpdate: '&'
  },
  controller: function () {

    this.update = function (status) {
      if(this.status !== status) {
        this.status = status;
        this.onUpdate();
      }
    };

  }
});

/* https://docs.angularjs.org/guide/bootstrap */
angular.bootstrap(document.getElementById("demo"), ['myApp']);