Custom Directive ,isolated scope and form validation-Collection of common programming errors

I need to create the following component

i have defined the form and form validation for it

invalid BP

i have also created a directive “bp” for validating when user enters in the text box

mobileApp.directive("bp", ['orderData', function (orderData) {
return {
require: 'ngModel',
    link: function (scope, element, attrs, ctrl) {
        //ctrl.$parsers.unshift(function(viewValue) {
        element.bind("change", function () {
            //  element.attr('readonly', true);

            //a promise is returned from the service ajax call


            //tell angular to apply changes after the promise is returned 

            scope.$apply(function () {
                console.log(scope);
                var promise = orderData.vaidateBP(element.val());
                promise.then(
                    function (data) {
                        if (data.length > 0) {
                            if (scope.SoHeader) {
                                scope.SoHeader.salesOffice = data[0].soff;
                                scope.SoHeader.salesOrderType = data[0].otype;
                                scope.SoHeader.address = data[0].Address;
                            }
                            ctrl.$setValidity('bp', true);

                            //  return viewValue;
                        }
                        else {
                            ctrl.$setValidity('bp', false);
                            //return undefined;
                        }

                    },
                        function (response) {
                            console.log(response);
                        }


                    )
            });


        })
    }

   }
}]);

this works fine ,but how should i go on with the “lookup button “!

the user should be allowed to click on the button a dialog will open he can select a value from the list and that value should be filled in the text box . i tried using angularUI’s dialog ,works like charm but how can i set the validation for the text box to valid after the user selects some thing from the dialog opened by the button,cause user puts some invalid value and then click’s the look up button to select valid value the text box is still shown as invalid. how should i go on with creating a reusable directive which comprises of this![look-up button][1] and has isolated scope but can set the validation after the user’s changes in the input are valid as-well-as when he selects a value from the dialog list provided on click of the lookup button

Originally posted 2013-12-02 01:41:15.