JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="app">
<section ng-controller="CampusFormController">
<pre>
{{ model | json }}
{{a}}
</pre>
<input ng-model="a">
<div ng-repeat="item in model.campuses track by $index" class="form-group row">
<button ng-click="remove($index)">re</button>
<label>Campus</label>
<select class="form-control" ng-model="model.campus">
<option>Select a campus</option>
<option>Campus 1</option>
<option>Campus 2</option>
<option>Campus 3</option>
</select>
<label>School</label>
<select class="form-control" ng-model="model.school">
<option>Select a School</option>
<option>School 1</option>
<option>School 2</option>
</select>
</div>
<button ng-click="addCampus()">Add another campus</button>
</section>
</div>
JavaScript
(function(){
angular.module('app', [])
.controller('CampusFormController', function($scope, $log) {
$scope.addCampus = newCampus;
$scope.model = {};
$scope.model.campuses = [];
$scope.model.school ;
$scope.model.campus ;
function init(){
console.log("Initing");
$log.log("loading");
newCampus();
}
function newCampus() {
$log.log("Adding a new campus");
$scope.model.campuses.push({campus:$scope.model.campus,school:$scope.model.school});
}
$scope.remove = function (index) {
$scope.model.campuses.splice(index, 1);
};
init();
});
})();