JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="CounterController as counterCtrl">
        Count: {{counterCtrl.counter.count}}
        <div ng-click="counterCtrl.increment()">increment</div>
    </div>
    
    <div ng-controller="CounterController as counterCtrl">
       Count: {{counterCtrl.counter.count}}
       <div ng-click="counterCtrl.increment()">increment</div>
    </div>
    
    <div ng-controller="CounterController as counterCtrl">
        <select type="select" ng-model="counterCtrl.selectedTask" ng-options="task as task.title for task in counterCtrl.counter.tasks"></select>
        <div>
          {{counterCtrl.counter.tasks}}
        </div>
         
    </div>
    
    
</div>

JavaScript

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

myApp.factory('counter', function() {
	return {
    	count: 0,
      tasks: []
    };
});

myApp.controller('CounterController', function (counter) {
	var vm = this;
    
    vm.counter = counter;
    vm.increment = function() {
    	vm.counter.count = vm.counter.count + 1;
      vm.counter.tasks.push({
      	title: 'Task' + vm.counter.count
      });
    };
});