NavizDev/index.html

## index.html
<html> <div ng-app="myApp" ng-controller="myController">
  <h3>DATOS DE LA PERSONA:<h3>
  <input ng-model="person.name"></input>
  <select id="typeperson" ng-model="person.typeperson" ng-change="changetypedocument()">
  <option ng-repeat="item in typeperson" value="{{item.id}}">{{item.name}}</option>
 </select>
  <select name="typedocument" id="typedocument" ng-model="person.typedocument" >
  <option ng-repeat="item in typedocument" value="{{item.id}}">{{item.name}}
  </select>
    <button ng-click="load()">Cargar</button>
</div>
</html>

## ng-change-vs-watch.markdown

      
    Raw
  

              ng-change-vs-watch.markdown
            
          
    Ng-Change vs $watch

Ejemplo de usar ng-change y $watch
A Pen by Juan Silupu Maza on CodePen.
License.

  
## script.js
var app = angular.module('myApp', []);
app.controller('myController', function($scope,$timeout) {
  $scope.typeperson=[{id:1,name:"NATURAL"},{id:2,name:"JURIDICA"}]
  $scope.typedocument=[{id:1,name:"DNI"},{id:2,name:"RUC"}]
  $scope.person={};

  $scope.load = function(){
    $scope.person.name="Juan Jose Silupu Maza";
    $scope.person.typeperson='1';
    console.log("person",$scope.person);
     /*$timeout(function() {
     $scope.person.typeperson='1';
      },300)*/
    //$scope.changetypedocument();
  }

  $scope.changetypedocument=function(){
    console.log("ng-change",$scope.person);
    if($scope.person.typeperson=='1'){
      $scope.person.typedocument='1';
    }else{
      $scope.person.typedocument='2';
    }
  }

   /*$scope.$watch('person.typeperson', function(newValue, oldValue) {
    if (newValue === oldValue) { return; }
     if($scope.person.typeperson=='1'){
      $scope.person.typedocument='1';
    }else{
      $scope.person.typedocument='2';
    }
  });*/

});

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<html> <div ng-app="myApp" ng-controller="myController">
	<h3>DATOS DE LA PERSONA:<h3>
	<input ng-model="person.name"></input>
	<select id="typeperson" ng-model="person.typeperson" ng-change="changetypedocument()">
	<option ng-repeat="item in typeperson" value="{{item.id}}">{{item.name}}</option>
	</select>
	<select name="typedocument" id="typedocument" ng-model="person.typedocument" >
	<option ng-repeat="item in typedocument" value="{{item.id}}">{{item.name}}
	</select>
	<button ng-click="load()">Cargar</button>
	</div>
	</html>
	var app = angular.module('myApp', []);
	app.controller('myController', function($scope,$timeout) {
	$scope.typeperson=[{id:1,name:"NATURAL"},{id:2,name:"JURIDICA"}]
	$scope.typedocument=[{id:1,name:"DNI"},{id:2,name:"RUC"}]
	$scope.person={};

	$scope.load = function(){
	$scope.person.name="Juan Jose Silupu Maza";
	$scope.person.typeperson='1';
	console.log("person",$scope.person);
	/*$timeout(function() {
	$scope.person.typeperson='1';
	},300)*/
	//$scope.changetypedocument();
	}

	$scope.changetypedocument=function(){
	console.log("ng-change",$scope.person);
	if($scope.person.typeperson=='1'){
	$scope.person.typedocument='1';
	}else{
	$scope.person.typedocument='2';
	}
	}

	/*$scope.$watch('person.typeperson', function(newValue, oldValue) {
	if (newValue === oldValue) { return; }
	if($scope.person.typeperson=='1'){
	$scope.person.typedocument='1';
	}else{
	$scope.person.typedocument='2';
	}
	});*/

	});
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>