Modal Box Displaying then Hiding

I have a modal box which gets displayed on button click.
This is done via Angular JS in my ASP.Net application.

In the JS code if I call the code below it works everytime.

Code:

---

$(element).show().append(
                                        '<div id="bapApp" ng-class="{ \'french\': appSettings.locale == \'fr\' }">' +
                                        '<div id="bapAppContent" ng-controller="AppCtrl">' +
                                        '<div class="container bap-app" ng-class="{ \'french\': appSettings.locale == \'fr\' }" ng-view=""></div>' +
                                        '</div></div>');

                                isStarted = true;

            angular.bootstrap($('div#bapApp', element)[0], ['bapApp']);

---

However I need to alter the query string to add in some deep linking first.

Which I do using the code below

Code:

---

if (transKey && term && trimKey && modelYear)
                {
                win.location.hash =  '#!/' + lang + '?term=' + term +
                  '&model_key=' + modelKey;
               
                }

---

When I add this and fire the event the first time the modal displays but immediately disappears, on firing the event a second time the modal displays correctly. I cannot figure out why this happens.
Has anyone got any ideas what could be going on.

The query strings appear the same on first click and second.
No errors show in the console when debugging.