JSFiddle - React, Tailwind, and code Playground

by Roger Sanchez

HTML

<div ng-app="myApp" ng-controller="AppCtrl">
   <button ng-click="showdata()">
      Show Data
    </button>
    
  <form ng-submit="addStudent()">
    <input type="text" ng-model="newStudent.first">
    <br>
    <input type="text" ng-model="newStudent.last">
    <br>
    <button type="submit">
      Add New Student
    </button>
    
    
    
  </form>

  <hr>
  <ul>
    <li ng-repeat="student in students"> {{ student.first}} {{ student.last }} </li>
  </ul>
</div>

JavaScript

angular
  .module('myApp', [])
  .controller('AppCtrl', AppCtrl)
  .factory('SchoolService', SchoolService);

function AppCtrl($scope, SchoolService) {
  $scope.students = SchoolService.students;
  $scope.addStudent = function() {
    SchoolService.students.push($scope.newStudent);
    $scope.newStudent = {};
    
    SchoolService.students.push($scope.test);
    $scope.test = { 'item' : 121};
  }
  
  $scope.showdata = function(){
    console.log(JSON.stringify(SchoolService));
  }
  
}



function SchoolService() {
  var service = {
    students: []
  };

  return service;
}