JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="AppCtrl">

  <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 = {
    
    };
  }
}

function SchoolService() {
  var service = {
    students: [
    {
    firstname:"",
    lastname:""
    }
    ]
  };

  return service;
}