Can not clear border color property using angular.js

Question

I have an issue to set/clear border color property using Angular.js.Here my requirement is when user will click on submit button with out filling the form input field the validation message will display and the respective input field 's border color will red.When user will input the data it will again remove to previous state.I am explaining my code below.

<div class="input-group bmargindiv1 col-md-12">
  <span class="input-group-addon ndrftextwidth text-right" style="width:180px">College Title :</span>
  <input type="text" name="colgmname" id="procolgtitle" class="form-control" placeholder="Add College Title" ng-model="colgname" ng-keypress="clearField('procolgtitle');">
  <input type="button" class="btn btn-success" ng-click="addProfileData();" id="addProfileData" value="submit" />
</div>

Please check my below controller file code.

$scope.addProfileData = function(billdata) {
    //console.log('button name',$scope.buttonName);
    if ($scope.colgname == null) {
        alert('College Title field could not be blank...');
        focusField.borderColor('procolgtitle');
    }
}

$scope.clearField = function(id) {
    focusField.clearBorderColor(id);
}

dashboard.factory('focusField', function($timeout, $window) {
    return {
        borderColor: function(id) {
            $timeout(function() {
                var element = $window.document.getElementById(id);
                if (element) {
                    element.focus();
                    element.style.borderColor = "red";
                }
            });
        },
        clearBorderColor: function(id) {
            $timeout(function() {
                var element = $window.document.getElementById(id);
                if (element) {
                    element.style.borderColor = "#555555";
                }
            });
        }
    }
});

Here it is happening like my requirement but problem is suppose first time user clicked on the submit button without filling some data the red border is coming then user typed some data the red border gone.If again user clear all typed data from input field and clicked on submit button the red border is not coming for second time.Please help me to resolve this issue.

Answer 1

This is because $scope.colgname is not null the second time (it is equal to '' ). You could replace your code with this :

if ($scope.colgname == null || $scope.colgname == '') {
    //...
}

Or this :

if (!($scope.colgname)) {
    //...
}