NgModel

by OwenMelbz

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app ng-controller="CarController">
    <form>
        <input ng-model="newCar.name" placeholder="New Car Name" />
        <input type="number" ng-model="newCar.topSpeed" placeholder="New Car Top Speed" />
        <button ng-click="addCar();">Save</button>
    </form>
    <ul>
        <li ng-repeat="car in cars">{{car.name}} - {{car.topSpeed}}</li>
    </ul>
</div>

JavaScript

var CarController = function ($scope) {

    $scope.newCar = {
        "name": null,
            "topSpeed": null
    };

    $scope.cars = [{
        "name": "Electric Car",
            "colour": "White",
            "topSpeed": 250
    }, {
        "name": "Hybrid Car",
            "colour": "Green",
            "topSpeed": 230
    }, {
        "name": "Petrol Car",
            "colour": "Black",
            "topSpeed": 220
    }];

    $scope.addCar = function () {
        $scope.cars.push(angular.copy($scope.newCar));
        document.getElementsByTagName("form")[0].reset();
    };
};