JSFiddle - React, Tailwind, and code Playground

by M. Junaid Salaat

HTML

<div ng-app="myApp">

  <div ng-controller="listUsers">
    <div ng-repeat="user in userloop">{{user.name}}: {{user.email}}</div>
  </div>

  <div ng-controller="addUsers">
    <button ng-click="buttonFire()">Add New</button>
  </div>

</div>

JavaScript

var myApp = angular.module('myApp', []);
myApp.factory('dataFactory', function($http) {
  var users = [{'name': 'name', 'email': 'email'}];
  
  return {
    addUser : function(user){
      users.push(user);
    },
    
    getUsers: function() {
        return users;
    }
  }
});

myApp.controller('listUsers', function($scope, dataFactory) {
  $scope.userloop = dataFactory.getUsers();
});

myApp.controller('addUsers', function($scope, $http ,dataFactory) {

  $scope.buttonFire = function() {
    //mocking http call
    dataFactory.addUser({'name': 'demoname', 'email': 'demoemail'});
        //$http.post("add.php",{'name': 'demoname', 'email': 'demoemail'})
            //.success(function(data, status, headers, config){
							//dataFactory.getUsers();
            //});
    }
});