<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="ControladorPrincipal">
    <canvas 
    class="chart chart-pie" 
    chart-data="datos" 
    chart-labels="etiquetas"></canvas>
    <br>
    <input placeholder="Etiqueta" type="text" ng-model="etiqueta" /><br><br>
    <input placeholder="Valor" type="number" ng-model="valor" /><br><br>
    <button ng-click="agregarDato(etiqueta, valor)">Agregar</button>
  </div>
</body>

</html>
angular
  .module("app", ['chart.js']) // Le decimos que usaremos a chart.js
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    $scope.etiquetas = ['Gastos', 'Ventas', 'Compras'];

    $scope.datos = [1244, 1500, 2053];
    $scope.agregarDato = function(etiqueta, valor) {
      if (etiqueta && valor) { //Comprobar si no son nulos o indefinidos
        $scope.datos.push(valor);
        $scope.etiquetas.push(etiqueta);
      }
    };
  }]);
/* Styles go here */