JSFiddle - React, Tailwind, and code Playground

by emilcieslar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="shareApp">

  <div ng-controller="firstController as first">
    First controller: {{first.myArray}}
  </div>
  
  <div ng-controller="secondController"></div>

</div>

JavaScript

var shareApp = angular.module("shareApp", []);

shareApp.factory('ShareArray', ['$http', function($http) {

	var myArr = ['default thing'];

	return {
  	getMyArr: function() {
    	return myArr;
    },
    setMyArr: function(val) {
    	myArr.push(val);
    },
    updateMyArr: function() {
    
    	$http.get('/echo/json').then(function(response) {

        myArr.push('something new');
        // DON'T DO THIS, it creates new reference and doesn't update
        // old myArr
        myArr = [];

      });
      
    }
  }

}]);

shareApp.controller('firstController', ['ShareArray', function(ShareArray) {

	var self = this;
  self.myArray = ShareArray.getMyArr();
  
}]);

shareApp.controller('secondController', ['ShareArray','$http', function(ShareArray, $http) {

	var self = this;
  ShareArray.updateMyArr();
  
}]);