<div ng-app>
    <div ng-controller="Controller">
<div class="form-group" id = "numNetDiv" style="display:block">
        <div class="col-sm-3"><label for="numNetworks">Number of Networks</label><input id="numNetworks" ng-model="numNetworks" ng-change="addNetworkFields()" type="text" class="form-control"  required />
        <div class="col-sm-3" id="container" style="margin-left: 50px"></div></div></div>

        <div class="form-group" id = "checkNetsDiv" style="display:block">
        <div><button id="checkNets" type="button" class="btn btn-nets" style="margin-left: 100px" ng-click="checkNets()">Validate</button></div></div>
        <p id="demo"></p></div></div>

// Add input boxes based on # of networks
function Controller($scope){
    $scope.count=0;
    $scope.addNetworkFields = function() {
    var number = document.getElementById("numNetworks").value;
    console.log(number);
    var container = document.getElementById("container");
    while (container.hasChildNodes()) {
        container.removeChild(container.lastChild);
    }
    for (i=0;i<number;i++){
        container.appendChild(document.createTextNode("Network" + (i+1) + ": "));
        var input = document.createElement("input");
        input.type = "text";
        container.appendChild(input);
        container.appendChild(document.createElement("br"));
        }
     }
   // Run ping on each subnet
   $scope.checkNets = function() {
   console.log('Click!')
   for (i=0;i<number;i++){
   //Access each networks and run ping on each one after another

   // Call below for each network to perform ping
   var ping = $.param({network: $scope.network[i]}); // [i] to access each network?  Just an idea
   $http({
            url: 'https://' + location.hostname + '/ping_network',
            method: "POST",
            data: ping
        })
        .then(function(response) {
    $scope.pingResult = response.data;
    })

   }
   }

 }