Access UI elements from Angular controllers

Question

I have this HTML:

<select id="common_commonbundle_standard_address_country" 
        ng-model="common_commonbundle_standard_address.country" 
        required="required" 
        tooltip="País" 
        tooltip-trigger="focus" 
        tooltip-placement="right" 
        wv-def="País" 
        wv-cur="" 
        wv-err="Error!" 
        wv-req="The value you selected is not a valid choice" 
        type="text" 
        class="ng-scope ng-dirty ng-valid ng-valid-required">
  ...
</select>

And I'm trying to watch for changes in common_commonbundle_standard_address.country using this code:

$scope.$watch('$scope.common_commonbundle_standard_address.country', function(iso_country) {
    if (iso_country)
        $http.get(Routing.generate('states') + iso_country).success(function(data) {
            if (data.message) {
                $scope.message = data.message;
            } else {
                $scope.states = data;
            }
        }).error(function(data, status, headers, config) {
            if (status == '500') {
                $scope.message = "No hay conexión con el servidor.";
            }
        });
});

But it does not work, what I'm doing wrong?

Added controller

app.controller('NewSeller', function($scope, $http, $routeParams, $fileUploader) {

$scope.section = $routeParams.section == undefined ? 'main' : $routeParams.section;
$scope.aaaa = 'sdsdsdsd';

switch ($scope.section) {
    case 'registro':
        {
            $('.seller-menu').animate({left: -230}, 300);
            $scope.section = 'primer-paso';
            break;
        }
    case 'segundo-paso':
        {
            break;
        }
    case 'main':
    default:
        {
            break;
        }
}

// Add watch for states
$scope.$watch('common_commonbundle_standard_address.country',
        function(iso_country) {
            $http.get(Routing.generate('states') + iso_country).success(function(data) {
                if (data.message) {
                    $scope.message = data.message;
                } else {
                    $scope.states = data;
                }
            }).error(function(data, status, headers, config) {
                if (status == '500') {
                    $scope.message = "No hay conexión con el servidor.";
                }
            });
        }, true);

});

Answer 1

You don't need to include $scope. in your watch expression. You may also want to try using object equality:

$scope.$watch('common_commonbundle_standard_address.country',
    function(country) {
        // Do some work here
    }, true);