JSFiddle - React, Tailwind, and code Playground

by Nicolas Lips

HTML

<div ng-app="modelDemo">
  <h1>
    Liste
  </h1>
  <div ng-controller="AuthorListCtrl">
    <h2>Total: {{getTotal()}}</h2>
    <ul>
      <li ng-repeat="author in list">
        {{author.name}}
        <button ng-click="f1(author)">Call f1</button>        
      </li>    
    </ul>
  </div>
            <div>
                <textarea name="quotetext" id="quotetext" ng-controller="QuoteTextCtrl" readonly>{{authorListModel.selectedAuthor.quote}}</textarea> 
             </div>              
            <div>
                 <pre ng-controller="QuoteTextCtrl">Total: {{authorListModel.getTotal()}}
                </pre>
             </div>              
</div>

JavaScript

angular.module('modelDemo', []);
/*.
config(function ($routeProvider) {
    $routeProvider.
    when('/', {
        controller: 'AuthorListCtrl',
        templateUrl: 'list.html'
    }).
    otherwise({
        redirectTo: '/'
    });
});*/

angular.module('modelDemo').service("workspacesDataService", ['workspacesAPIService', function(workspacesAPIService) {
	var workspaces = [
  	{
    	name: "w1",
      descriptor: "{color: \"red\"}"
    }
  ];
  return {
  	getAll: function() {
			return $q(function(resolve, reject) {
    		setTimeout(function() {
        	resolve(workspaces);
         	// if error
        	// reject(...);
      	}, 1000);    	
    	});
  	}
  };
}]);

angular.module('modelDemo').service("workspacesAPIService", ['$q', function($q) {
	var workspaces = [
  	{
    	name: "w1",
      descriptor: "{color: \"red\"}"
    }
  ];
  return {
  	getAll: function() {
			return $q(function(resolve, reject) {
    		setTimeout(function() {
        	resolve(workspaces);
         	// if error
        	// reject(...);
      	}, 1000);    	
    	});
  	}
  };
}]);

angular.module('modelDemo').controller("AuthorListCtrl", ['$scope', 'authorListModel', function($scope, authorListModel) {

		$scope.f1 = function(author)
    {
    	alert("f1: "+author.name);
      authorListModel.total++;
    }
    
    $scope.getTotal = function() {
    	return authorListModel.getTotal();
    } 

    $scope.list = authorListModel.list;   
    
    $scope.selectQuote = function(author) {
        authorListModel.setSelectedAuthor(author);
    };
    
    $scope.isSelected = function(author) {
        return author === authorListModel.selectedAuthor;
    };
    
    $scope.$on('authorModel::selectedAuthorUpdated', function(event) {
        $scope.selectedAuthor = authorListModel.selectedAuthor;
    });
}]);

angular.module('modelDemo').controller("QuoteTextCtrl", ['$scope', function($scope) {
    $scope.$on('authorModel::selectedAuthorUpdated', function(event, author) {
       ...