<!DOCTYPE html>
<html ng-app="mascotas">

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="ControladorPrincipal">
  
  <p>Registremos una mascota</p>
  <input type="text" ng-model="mascota.nombre" placeholder="Nombre" />
  <br />
  <br />
  <input type="number" ng-model="mascota.edad" placeholder="Edad" />
  <br />
  <br />
  <button ng-click="agregar(mascota)">Guardar</button>
  <br />
  <br />
  <table border="1">
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Edad</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="mascota in mascotas track by $index">
        <td>{{mascota.nombre}}</td>
        <td>{{mascota.edad}}</td>
      </tr>
    </tbody>
  </table>
  <h1>angular.copy</h1>
  <p>angular.copy sirve para crear un nuevo objeto a partir de uno ya existente, pero sin mantener la referencia.
    <br> De esta forma, aunque el objeto original sufra cambios, éstos no se verán reflejados en los demás.
    <br> Probemos poniendo objetos en un arreglo sin angular.copy
  </p>
</body>

</html>
// Code goes here

(function(angular) {
  angular.module("mascotas", [])
    .controller("ControladorPrincipal", ["$scope", function($scope) {
      $scope.mascotas = [];
      $scope.agregar = function(mascota) {
        if (mascota.nombre && mascota.edad)
          $scope.mascotas.push(mascota);
      };
    }]);
})(angular);
/* Styles go here */