Не кэшировать и не читать кэш | AngularJS 1.6 | Bootstrap 3.3

У меня модальный Бутстрэп, внутри звонок сделан $httpс угловой.
Но только при загрузке страницы идет на сервер и получает данные, вопрос:

Можно ли сделать вызов «http» каждый раз, когда открывается модал Bootstrap?

var helloApp = angular.module('helloApp',[]);

helloApp.controller("CompanyCtrl",['$scope',function($scope){

	$scope.numbers = [1,2,3,4,5,6,7,8,9];
	$scope.tableTitle = "SEMESTRE ";
	$scope.checked1 = false; //DELETE

	$scope.number = 7;
	$scope.getNumber = function(num) {
	    return new Array(num);   
	}

	$scope.companies = [
                    { 'name':'Infosys Technologies',
                    	'employees': 125000,
                    	'headoffice': 'Bangalore'},
                    	{ 'name':'Cognizant Technologies',
	                    	'employees': 100000,
	                    	'headoffice': 'Bangalore'},
	                    	{ 'name':'Wipro',
		                    	'employees': 115000,
		                    	'headoffice': 'Bangalore'},
		                    	{ 'name':'Tata Consultancy Services (TCS)',
			                    	'employees': 150000,
			                    	'headoffice': 'Bangalore'},
			                    	{ 'name':'HCL Technologies',
				                    	'employees': 90000,
				                    	'headoffice': 'Noida'},
                    ];
    $scope.vAddGroup = [

    ];

$scope.addGroup = function(name){	
	var index = -1;	
	var comArr = eval( $scope.companies );
		for( var i = 0; i < comArr.length; i++ ) {
			if( comArr[i].name === name ) {
				index = i;
				break;
			}
		}
		if( index === -1 ) {
			alert( "Something gone wrong" );
		}

	$scope.vAddGroup.push({ 'name':comArr[index].name, 'employees':comArr[index].employees, 'headoffice':comArr[index].headoffice });
	$scope.checked1 = true;

	var d = document.getElementById("1"); // IDENTIFICADOR UNICO CADA MATERIA
	d.className = " subjectOK not-active";

};


$scope.addRow = function(){		
	$scope.companies.push({ 'name':$scope.name, 'employees': $scope.employees, 'headoffice':$scope.headoffice });
	$scope.name='';
	$scope.employees='';
	$scope.headoffice='';
};

$scope.removeRow = function(name){				
		var index = -1;		
		var comArr = eval( $scope.vAddGroup );
		for( var i = 0; i < comArr.length; i++ ) {
			if( comArr[i].name === name ) {
				index = i;
				break;
			}
		}
		if( index === -1 ) {
			alert( "Something gone wrong" );
		}
		$scope.vAddGroup.splice( index, 1 );	
		$scope.checked1 = false;

		var d = document.getElementById("1"); // IDENTIFICADOR UNICO CADA MATERIA
		d.className = " subject";
	};

}]);



helloApp.controller('DataCtrl', function($scope, $http) {
  $http.get("http://www.w3schools.com/angular/customers.php")
  .then(function(response) {
      $scope.content = response.data.records;
  }, function(response) {
      $scope.contentWrong = response.config;
  });

});


function closeModal(){

	$(".modalCloseID").on('hide.bs.modal', function () {
	});

	console.log("TEST");

	$('.modalCloseID').modal('hide');
}
.subject {
    background-color: #4CAF50; /* Green */
    /* border: none; */
    border: 1px solid white;
    border-radius: 4px;
    color: white; 
    padding: 1px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    cursor: hand;
    line-height:20px;
    -webkit-transition-duration: .4s; /* Safari */
    transition-duration: .4s;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */

}
.subject:hover {
    background-color: #241E4E; 
    color: white; 
    border: 1px solid #555555;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

}
.subject:focus {
outline:0px;
}

.subjectOK {
	 background-color: white; 
    /* border: none; */
    border: 2px solid black;
    border-radius: 30%;
    color: black; 
    padding: 1px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor:not-allowed;
    line-height:20px;
    -webkit-transition-duration: .4s; /* Safari */
    transition-duration: .4s;


     -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */

}

.csstr {
	border: 0px solid black;

}


.csstitle {
    border-left: 6px solid red;
    background-color: lightgrey;
}

.not-active {
   pointer-events: none;
   cursor: default;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="helloApp">
<head>

	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Last-Modified" content="0">
	<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
	<meta http-equiv="Pragma" content="no-cache">


<title>AngularJS</title>


		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link rel="stylesheet" href="main.css">
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<script type="text/javascript" src="controllers.js"></script>


			
</head>
<!-- Controller name goes here -->
<body ng-controller="CompanyCtrl">


	<h2 class="csstitle">Seleccionar Materias</h2>



	<div class="table-responsive">          
	  <table class="table">
	    <thead>
	      <tr>
	        <th ng-repeat="number in numbers" class="text-center">{{tableTitle}}{{number}}</th>
	      </tr>
	    </thead>
	    <tbody ng-app="helloApp" ng-controller="DataCtrl">
	      <tr class="csstr" ng-repeat="item in content | limitTo: 7">

	        <td> <!-- SEMESTRE #1 -->
	        	<div id="{{numbers[0]}}" class="subject" data-toggle="modal" data-target="#myModal{{numbers[0]}}">{{content[$index].City}} <br/> descripcion <br/> + S1</div>
	        </td>

	        <td><!-- SEMESTRE #2 -->
	        	<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[1]}}">{{content[$index].City}} <br/> descripcion <br/> + S2</div>
	        </td>

	        <td><!-- SEMESTRE #3 -->
	      	    <div class="subject" data-toggle="modal" data-target="#myModal{{numbers[2]}}">{{item.City}} <br/> descripcion <br/> + S3</div>	
	        </td>

	        <td><!-- SEMESTRE #4 -->
	        	<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[3]}}">{{item.City}} <br/> descripcion <br/> + S4</div>	
	        </td>

	        <td><!-- SEMESTRE #5 -->
	        	<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[4]}}">{{item.City}} <br/> descripcion <br/> + S5</div>	
	        </td>

	        <td><!-- SEMESTRE #6 -->
	        	<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[5]}}">{{item.City}} <br/> descripcion <br/> + S6</div>	
	        </td>

	        <td><!-- SEMESTRE #7 -->
	        	<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[6]}}">{{item.City}} <br/> descripcion <br/> + S7</div>	
	        </td>

	        <td><!-- SEMESTRE #8 -->
	        	<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[7]}}">{{item.City}} <br/> descripcion <br/> + S8</div>	
	        </td>

	        <td><!-- SEMESTRE #9 -->
	        	<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[8]}}">{{item.City}} <br/> descripcion <br/> + S9</div>	
	        </td>

	      </tr>

	    </tbody>
	  </table>
  	</div>



<div ng-app="helloApp" ng-controller="DataCtrl" ng-repeat="item in numbers | limitTo: 9">
  <!-- Modal -->
  <div class="modal fade modalCloseID" id="myModal{{item}}" role="dialog" data-backdrop="static">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Materia # {{item}}</h4>
        </div>
        <div class="modal-body">
          <p>Seleccione un horario.</p>

					<label>Filtro</label>
					<input type="text" class="form-control" ng-model="searchKeyword"/> 

					<div ng-app="helloApp" ng-controller="DataCtrl">
						{{content}}
						{{contentWrong}}
					</div>


					<table class="table">
						<tr>
							<th>Name
							</th>
							<th>Employees
							</th>
							<th>Head Office
							</th>
							<th>Acción
							</th>
						</tr>
						<tr ng-repeat="company in companies  | filter: searchKeyword ">
							<td>
								{{company.name}}
							</td>
							<td>
								{{company.employees}}
							</td>
							<td>
								{{company.headoffice}}
							</td>
							<td>
							<input type="button" value="Agregar" class="btn btn-primary" onclick="closeModal()" ng-click="addGroup(company.name)" ng-disabled="checked{{item}}"/>
							</td>
						</tr>
					</table>

				</div>
       		<div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        </div>
      </div>
    </div>
  </div>
 	<!-- END MODAL-->
</div>
 



	<hr>
	<h2 class="csstitle">Materias seleccionadas</h2>

	<table class="table">
		<tr>
			<th>Name
			</th>
			<th>Employees
			</th>
			<th>Head Office
			</th>
			<th>Acción
			</th>
		</tr>
		<tr ng-repeat="item in vAddGroup">
			<td>
				{{item.name}}
			</td>
			<td>
				{{item.employees}}
			</td>
			<td>
				{{item.headoffice}}
			</td>
			<td>
			<input type="button" value="Eliminar" class="btn btn-danger" ng-click="removeRow(item.name)"/>
			</td>
		</tr>
	</table>





</body>
</html>

1 ответ

  1. Ниже приведен простой ответ «как можно меньше изменений» :
    Я добавил ng-click на ваши кнопки и обернул ваш http-вызов в функцию, которая вызывается при нажатии любой из кнопок.

    Более длинный (и более правильный) ответ будет включать:

    • Вероятно, слом jquery из вашего проекта все вместе, потому что angular и jquery действительно не играют так хорошо вместе.

    • ng-controller="DataCtrl" ng-repeat="item in numbers" При этом вы получаете по одному экземпляру DataCtrl для каждого «элемента». Обычно с угловыми и модальными, вы хотите только один модальный и изменить содержание, как вы показать и скрыть его. (Когда ваше приложение небольшое в любом случае.)

    • Вы сделали вещи немного сухими, прокручивая свои номера для каждого столбца с помощью кнопок. Я бы, вероятно, пошел дальше и создал директиву для «предметной кнопки» (так как код здесь почти идентичен в каждой кнопке). И петля через каждую строку, а также.

    • Возможно, взгляните на UI Bootstrap . Но со временем вы, вероятно, поймете, что быстрое исправление для модалов в angular состоит в том, чтобы пропустить все другие зависимости и просто использовать что-то вроде ng-class="'show-modal':showModal". Bootstrap-скрипты, переключатели данных и jquery просто добавляют слои к чему-то, что уже очень просто с straight up angular/css.

    var helloApp = angular.module('helloApp',[]);
    
    helloApp.controller("CompanyCtrl",['$scope',function($scope){
    
    	$scope.numbers = [1,2,3,4,5,6,7,8,9];
    	$scope.tableTitle = "SEMESTRE ";
    	$scope.checked1 = false; //DELETE
    
    	$scope.number = 7;
    	$scope.getNumber = function(num) {
    	    return new Array(num);   
    	}
    
    	$scope.companies = [
                        { 'name':'Infosys Technologies',
                        	'employees': 125000,
                        	'headoffice': 'Bangalore'},
                        	{ 'name':'Cognizant Technologies',
    	                    	'employees': 100000,
    	                    	'headoffice': 'Bangalore'},
    	                    	{ 'name':'Wipro',
    		                    	'employees': 115000,
    		                    	'headoffice': 'Bangalore'},
    		                    	{ 'name':'Tata Consultancy Services (TCS)',
    			                    	'employees': 150000,
    			                    	'headoffice': 'Bangalore'},
    			                    	{ 'name':'HCL Technologies',
    				                    	'employees': 90000,
    				                    	'headoffice': 'Noida'},
                        ];
        $scope.vAddGroup = [
    
        ];
    
    $scope.addGroup = function(name){	
    	var index = -1;	
    	var comArr = eval( $scope.companies );
    		for( var i = 0; i < comArr.length; i++ ) {
    			if( comArr[i].name === name ) {
    				index = i;
    				break;
    			}
    		}
    		if( index === -1 ) {
    			alert( "Something gone wrong" );
    		}
    
    	$scope.vAddGroup.push({ 'name':comArr[index].name, 'employees':comArr[index].employees, 'headoffice':comArr[index].headoffice });
    	$scope.checked1 = true;
    
    	var d = document.getElementById("1"); // IDENTIFICADOR UNICO CADA MATERIA
    	d.className = " subjectOK not-active";
    
    };
    
    
    $scope.addRow = function(){		
    	$scope.companies.push({ 'name':$scope.name, 'employees': $scope.employees, 'headoffice':$scope.headoffice });
    	$scope.name='';
    	$scope.employees='';
    	$scope.headoffice='';
    };
    
    $scope.removeRow = function(name){				
    		var index = -1;		
    		var comArr = eval( $scope.vAddGroup );
    		for( var i = 0; i < comArr.length; i++ ) {
    			if( comArr[i].name === name ) {
    				index = i;
    				break;
    			}
    		}
    		if( index === -1 ) {
    			alert( "Something gone wrong" );
    		}
    		$scope.vAddGroup.splice( index, 1 );	
    		$scope.checked1 = false;
    
    		var d = document.getElementById("1"); // IDENTIFICADOR UNICO CADA MATERIA
    		d.className = " subject";
    	};
    
    }]);
    
    
    
    helloApp.controller('DataCtrl', function($scope, $http) {
    
      $scope.openModal = function(){
        $http.get("http://www.w3schools.com/angular/customers.php")
        .then(function(response) {
          $scope.content = response.data.records;
        }, function(response) {
          $scope.contentWrong = response.config;
        });
      };
      
      $scope.openModal();
      
    });
    
    function closeModal(){
    
    	$(".modalCloseID").on('hide.bs.modal', function () {
    	});
    
    	console.log("TEST");
    
    	$('.modalCloseID').modal('hide');
    }
    .subject {
        background-color: #4CAF50; /* Green */
        /* border: none; */
        border: 1px solid white;
        border-radius: 4px;
        color: white; 
        padding: 1px 25px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        cursor: hand;
        line-height:20px;
        -webkit-transition-duration: .4s; /* Safari */
        transition-duration: .4s;
    
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
         -khtml-user-select: none; /* Konqueror */
           -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                      not supported by any browser */
    
    }
    .subject:hover {
        background-color: #241E4E; 
        color: white; 
        border: 1px solid #555555;
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    
    }
    .subject:focus {
    outline:0px;
    }
    
    .subjectOK {
    	 background-color: white; 
        /* border: none; */
        border: 2px solid black;
        border-radius: 30%;
        color: black; 
        padding: 1px 25px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor:not-allowed;
        line-height:20px;
        -webkit-transition-duration: .4s; /* Safari */
        transition-duration: .4s;
    
    
         -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
         -khtml-user-select: none; /* Konqueror */
           -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                      not supported by any browser */
    
    }
    
    .csstr {
    	border: 0px solid black;
    
    }
    
    
    .csstitle {
        border-left: 6px solid red;
        background-color: lightgrey;
    }
    
    .not-active {
       pointer-events: none;
       cursor: default;
    }
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html ng-app="helloApp">
    <head>
    
    	<meta http-equiv="Expires" content="0">
    	<meta http-equiv="Last-Modified" content="0">
    	<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
    	<meta http-equiv="Pragma" content="no-cache">
    
    
    <title>AngularJS</title>
    
    
    		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    		<link rel="stylesheet" href="main.css">
    		<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    		<script type="text/javascript" src="controllers.js"></script>
    
    
    			
    </head>
    <!-- Controller name goes here -->
    <body ng-controller="CompanyCtrl">
    
    
    	<h2 class="csstitle">Seleccionar Materias</h2>
    
    
    
    	<div class="table-responsive">          
    	  <table class="table">
    	    <thead>
    	      <tr>
    	        <th ng-repeat="number in numbers" class="text-center">{{tableTitle}}{{number}}</th>
    	      </tr>
    	    </thead>
    	    <tbody ng-app="helloApp" ng-controller="DataCtrl">
    	      <tr class="csstr" ng-repeat="item in content | limitTo: 7">
    
    	        <td> <!-- SEMESTRE #1 -->
    	        	<div id="{{numbers[0]}}" class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[0]}}">{{content[$index].City}} <br/> descripcion <br/> + S1</div>
    	        </td>
    
    	        <td><!-- SEMESTRE #2 -->
    	        	<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[1]}}">{{content[$index].City}} <br/> descripcion <br/> + S2</div>
    	        </td>
    
    	        <td><!-- SEMESTRE #3 -->
    	      	    <div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[2]}}">{{item.City}} <br/> descripcion <br/> + S3</div>	
    	        </td>
    
    	        <td><!-- SEMESTRE #4 -->
    	        	<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[3]}}">{{item.City}} <br/> descripcion <br/> + S4</div>	
    	        </td>
    
    	        <td><!-- SEMESTRE #5 -->
    	        	<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[4]}}">{{item.City}} <br/> descripcion <br/> + S5</div>	
    	        </td>
    
    	        <td><!-- SEMESTRE #6 -->
    	        	<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[5]}}">{{item.City}} <br/> descripcion <br/> + S6</div>	
    	        </td>
    
    	        <td><!-- SEMESTRE #7 -->
    	        	<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[6]}}">{{item.City}} <br/> descripcion <br/> + S7</div>	
    	        </td>
    
    	        <td><!-- SEMESTRE #8 -->
    	        	<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[7]}}">{{item.City}} <br/> descripcion <br/> + S8</div>	
    	        </td>
    
    	        <td><!-- SEMESTRE #9 -->
    	        	<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[8]}}">{{item.City}} <br/> descripcion <br/> + S9</div>	
    	        </td>
    
    	      </tr>
    
    	    </tbody>
    	  </table>
      	</div>
    
    
    
    <div ng-app="helloApp" ng-controller="DataCtrl" ng-repeat="item in numbers | limitTo: 9">
      <!-- Modal -->
      <div class="modal fade modalCloseID" id="myModal{{item}}" role="dialog" data-backdrop="static">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Materia # {{item}}</h4>
            </div>
            <div class="modal-body">
              <p>Seleccione un horario.</p>
    
    					<label>Filtro</label>
    					<input type="text" class="form-control" ng-model="searchKeyword"/> 
    
    					<div ng-app="helloApp" ng-controller="DataCtrl">
    						{{content}}
    						{{contentWrong}}
    					</div>
    
    
    					<table class="table">
    						<tr>
    							<th>Name
    							</th>
    							<th>Employees
    							</th>
    							<th>Head Office
    							</th>
    							<th>Acción
    							</th>
    						</tr>
    						<tr ng-repeat="company in companies  | filter: searchKeyword ">
    							<td>
    								{{company.name}}
    							</td>
    							<td>
    								{{company.employees}}
    							</td>
    							<td>
    								{{company.headoffice}}
    							</td>
    							<td>
    							<input type="button" value="Agregar" class="btn btn-primary" onclick="closeModal()" ng-click="addGroup(company.name)" ng-disabled="checked{{item}}"/>
    							</td>
    						</tr>
    					</table>
    
    				</div>
           		<div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
            </div>
          </div>
        </div>
      </div>
     	<!-- END MODAL-->
    </div>
     
    
    
    
    	<hr>
    	<h2 class="csstitle">Materias seleccionadas</h2>
    
    	<table class="table">
    		<tr>
    			<th>Name
    			</th>
    			<th>Employees
    			</th>
    			<th>Head Office
    			</th>
    			<th>Acción
    			</th>
    		</tr>
    		<tr ng-repeat="item in vAddGroup">
    			<td>
    				{{item.name}}
    			</td>
    			<td>
    				{{item.employees}}
    			</td>
    			<td>
    				{{item.headoffice}}
    			</td>
    			<td>
    			<input type="button" value="Eliminar" class="btn btn-danger" ng-click="removeRow(item.name)"/>
    			</td>
    		</tr>
    	</table>
    
    
    
    
    
    </body>
    </html>