plunker: http://plnkr.co/edit/wURNg8ByPYbEuQSL4xwg
    
**example.js:**

    angular.module(&#39;plunker&#39;, [&#39;ui.bootstrap&#39;]);
      var ModalDemoCtrl = function ($scope, $modal) {

      $scope.open = function () {
        var modalInstance = $modal.open({
          templateUrl: &#39;modal.html&#39;,
          controller: &#39;ModalInstanceCtrl&#39;
        });
      };
    };

    var ModalInstanceCtrl = function ($scope, $modalInstance) {

      $scope.ok = function () {
        alert($scope.text);
      };

      $scope.cancel = function () {
        $modalInstance.dismiss(&#39;cancel&#39;);
      };
    };

**index.html:**

    &lt;!doctype html&gt;
    &lt;html ng-app=&quot;plunker&quot;&gt;
      &lt;head&gt;
        &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;example.js&quot;&gt;&lt;/script&gt;
        &lt;link href=&quot;//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css&quot; rel=&quot;stylesheet&quot;&gt;
      &lt;/head&gt;
      &lt;body&gt;

      &lt;div ng-controller=&quot;ModalDemoCtrl&quot;&gt;
        &lt;button class=&quot;btn&quot; ng-click=&quot;open()&quot;&gt;Open me!&lt;/button&gt;
        &lt;div ng-show=&quot;selected&quot;&gt;Selection from a modal: {{ selected }}&lt;/div&gt;
      &lt;/div&gt;
     &lt;/body&gt;
    &lt;/html&gt;

**modal.html:**

    &lt;div class=&quot;modal-header&quot;&gt;
        &lt;h3&gt;I&#39;m a modal!&lt;/h3&gt;
    &lt;/div&gt;
    &lt;textarea ng-model=&quot;text&quot;&gt;&lt;/textarea&gt;
    &lt;div class=&quot;modal-footer&quot;&gt;
        &lt;button class=&quot;btn btn-primary&quot; ng-click=&quot;ok()&quot;&gt;OK&lt;/button&gt;
        &lt;button class=&quot;btn btn-warning&quot; ng-click=&quot;cancel()&quot;&gt;Cancel&lt;/button&gt;
    &lt;/div&gt;




Why I can&#39;t get the $scope.text defined in ModalInstanceCtrl, even though I can use $scope.ok and $scope.cancel?

Scope issue in AngularJS using AngularUI Bootstrap Modal

I&#39;ve got links in templates inside modals. When I click them, the current page changes, but the overlay and modal stay. I could add `ng-click=&quot;dimiss()&quot;` to every link in all templates in modals, but is there a better way? E.g. to close it automatically on successful route change or add just one `ng-click` per template to handle all links?

Is there a way to automatically close Angular UI Bootstrap modal when route changes?

I am using the [ui.bootstrap.datepicker][1] directive to display some date field. However most of the time I need the same setup: I want it to come along with a popup and a popup button and also I want German names for the texts. That does create the same code for the button and the texts and the formatting over and over again, so I wrote my own directive to prevent myself from repeating myself.

[Here is a plunkr][2] with my directive. However I seem to be doing it wrong. If you choose a date with the date picker using the &quot;Date 1&quot; datepicker that does not use my directive everything works fine.
I&#39;d expect the same for Date 2, but instead of displaying the date according to the template I supplied in the input field (or any other value I expected) it displays the `.toString()` representation of the date object (e.g. `Fri Apr 03 2015 00:00:00 GMT+0200 (CEST)`).

Here is my directive:

&lt;!-- language: lang-javascript --&gt;

    angular.module(&#39;ui.bootstrap.demo&#39;).directive(&#39;myDatepicker&#39;, function($compile) {
      var controllerName = &#39;dateEditCtrl&#39;;
      return {
          restrict: &#39;A&#39;,
          require: &#39;?ngModel&#39;,
          scope: true,
          link: function(scope, element) {
              var wrapper = angular.element(
                  &#39;&lt;div class=&quot;input-group&quot;&gt;&#39; +
                    &#39;&lt;span class=&quot;input-group-btn&quot;&gt;&#39; +
                      &#39;&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; ng-click=&quot;&#39; + controllerName + &#39;.openPopup($event)&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-calendar&quot;&gt;&lt;/i&gt;&lt;/button&gt;&#39; +
                    &#39;&lt;/span&gt;&#39; +
                  &#39;&lt;/div&gt;&#39;);
    
              function setAttributeIfNotExists(name, value) {
                  var oldValue = element.attr(name);
                  if (!angular.isDefined(oldValue) || oldValue === false) {
                      element.attr(name, value);
                  }
              }
              setAttributeIfNotExists(&#39;type&#39;, &#39;text&#39;);
              setAttributeIfNotExists(&#39;is-open&#39;, controllerName + &#39;.popupOpen&#39;);
              setAttributeIfNotExists(&#39;datepicker-popup&#39;, &#39;dd.MM.yyyy&#39;);
              setAttributeIfNotExists(&#39;close-text&#39;, &#39;Schlie&#223;en&#39;);
              setAttributeIfNotExists(&#39;clear-text&#39;, &#39;L&#246;schen&#39;);
              setAttributeIfNotExists(&#39;current-text&#39;, &#39;Heute&#39;);
              element.addClass(&#39;form-control&#39;);
              element.removeAttr(&#39;my-datepicker&#39;);
    
              element.after(wrapper);
              wrapper.prepend(element);
              $compile(wrapper)(scope);
    
              scope.$on(&#39;$destroy&#39;, function () {
                  wrapper.after(element);
                  wrapper.remove();
              });
          },
          controller: function() {
              this.popupOpen = false;
              this.openPopup = function($event) {
                  $event.preventDefault();
                  $event.stopPropagation();
                  this.popupOpen = true;
              };
          },
          controllerAs: controllerName
      };
    });

And that&#39;s how I use it:

&lt;!-- language: lang-html --&gt;

    &lt;input my-datepicker=&quot;&quot; type=&quot;text&quot; ng-model=&quot;container.two&quot; id=&quot;myDP&quot; /&gt;

(Concept was inspired from [this answer][3])

I am using angular 1.3 (the plunker is on 1.2 because I just forked the plunker from the [angular-ui-bootstrap][4] datepicker documentation). I hope this does not make any difference.

**Why is the text output in my input wrong and how is it done correctly?**

# Update

In the meantime I made a little progress. After reading more about the details about compile and link, in [this plunkr](http://plnkr.co/edit/gtQzzH6fnv5Zjxc9vf9M) I use the compile function rather than the link function to do my DOM manipulation. I am still a little confused by this excerpt from the docs:

&gt; Note: The template instance and the link instance may be different objects if the template has been cloned. For this reason it is not safe to do anything other than DOM transformations that apply to all cloned DOM nodes within the compile function. Specifically, DOM listener registration should be done in a linking function rather than in a compile function.

Especially I wonder what is meant with &quot;that apply to all cloned DOM nodes&quot;. I originally thought this means &quot;that apply to all clones of the DOM template&quot; but that does not seem to be the case.

Anyhow: My new compile version works fine in chromium. In Firefox I need to first select a date using a date picker and after that everything works fine (the problem with Firefox solved itself if I change undefined to null ([plunkr](http://plnkr.co/edit/Oc069LSf42BE5N54IpBQ)) in the date parser of the date picker). So this isn&#39;t the latest thing either. And additionally I use `ng-model2` instead of `ng-model` which I rename during compile. If I do not do this everything is still broken. Still no idea why.


  [1]: https://angular-ui.github.io/bootstrap/
  [2]: http://plnkr.co/edit/eXxBnZ7ArHvhA6fQAxDL?p=preview
  [3]: https://stackoverflow.com/a/27605580/327301
  [4]: http://angular-ui.github.io/bootstrap/

How to create an angularJs wrapper directive for a ui-bootstrap datepicker?

At the [Angular-UI-Bootstrap page][1] on cdnjs, is says:

Native AngularJS (Angular) directives for Twitter&#39;s Bootstrap. Small footprint (5 kB gzipped!), no third-party JavaScript dependencies (jQuery, Bootstrap JavaScript) required!

... and has options for

    //cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js

and

    //cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap.min.js

Diff&#39;ing these shows a subtle difference, and I can&#39;t seem to find any documentation on it...

&gt; Long story short, use tpls unless you are going to create customized
&gt; templates.
&gt;
&gt; It is documented here:
&gt; github.com/angular-ui/bootstrap/tree/gh-pages#build-files (linked from
&gt; the home page as well). In short the -tpls version has default Bootstrap
&gt; templates bundled. In any case you should only include one of the
&gt; listed files. - Thanks pkozlowski.opensource

  [1]: http://cdnjs.com/libraries/angular-ui-bootstrap/


What is the difference between ui-bootstrap-tpls.min.js and ui-bootstrap.min.js?

I&#39;d like to make a minor modification to a 3rd party directive (specifically [Angular UI Bootstrap][1]).  I simply want to add to the scope of the `pane` directive:


    angular.module(&#39;ui.bootstrap.tabs&#39;, [])
    .controller(&#39;TabsController&#39;, [&#39;$scope&#39;, &#39;$element&#39;, function($scope, $element) {
      // various methods
    }])
    .directive(&#39;tabs&#39;, function() {
      return {
        // etc...
      };
    })
    .directive(&#39;pane&#39;, [&#39;$parse&#39;, function($parse) {
      return {
        require: &#39;^tabs&#39;,
        restrict: &#39;EA&#39;,
        transclude: true,
        scope:{
          heading:&#39;@&#39;,
          disabled:&#39;@&#39; // &lt;- ADDED SCOPE PROPERTY HERE
        },
        link: function(scope, element, attrs, tabsCtrl) {
          // link function
        },
        templateUrl: &#39;template/tabs/pane.html&#39;,
        replace: true
      };
    }]);

But I also want to keep Angular-Bootstrap up to date with Bower.  As soon as I run `bower update`, I&#39;ll overwrite my changes.

So how do I go about extending this directive separately from this bower component?




  [1]: http://angular-ui.github.io/bootstrap/

Extending AngularJs Directive

I am creating a modal:

    var modal = $modal.open({
    					templateUrl: &quot;/partials/welcome&quot;,
    					controller: &quot;welcomeCtrl&quot;,
    					backdrop: &quot;static&quot;,
    					scope: $scope,
    				});

is there a way to increase its width?

How do I increase modal width in Angular UI Bootstrap?

I&#39;m curious if there&#39;s a way to override single, specific templates from the ui-bootstrap-tpls file. The vast majority of the default templates fit my needs, but there&#39;s a couple specific ones I&#39;d like to replace without going through the whole process of grabbing all the default templates and getting them wired up to the non-tpls version.

Can you override specific templates in AngularUI Bootstrap?

What is the difference between &quot;dismiss&quot; a modal and &quot;close&quot; a modal?

    close(result) - a method that can be used to close a modal, passing a result
    dismiss(reason) - a method that can be used to dismiss a modal, passing a reason

What is the difference between &quot;dismiss&quot; a modal and &quot;close&quot; a modal in Angular UI-Bootstrap?

I&#39;m working on a project with this [template][1].

The template is written using AngularJs and Bootstrap-UI (bootstrap for angular) and I would like to include some Material Design elements like cards and others.

Is it possible to do that? is it recommended? 
My thing is we already love this template and way to many elements of it, but Material Design have cards, dropdown, text inputs with the label animation etc for example which are amazing.

So my question is: 

AngularJS + Bootstrap for Angular + Material Design for Angular = Awesomeness or Disaster?


  [1]: http://themeforest.net/item/angulr-bootstrap-admin-web-app-with-angularjs/8437259

Using Bootstrap for Angular and Material design for Angular together

I&#39;ve created a JSFiddle with a dropdown navbar using angular-ui-boostrap&#39;s module &quot;ui.bootstrap.dropdownToggle&quot;: **http://jsfiddle.net/mhu23/2pmz5/**

    &lt;div class=&quot;navbar navbar-fixed-top&quot;&gt;
    &lt;div class=&quot;navbar-inner&quot;&gt;
        &lt;div class=&quot;container&quot;&gt; &lt;a class=&quot;brand&quot; href=&quot;#&quot;&gt;
                    My Responsive NavBar
                &lt;/a&gt;

            &lt;ul class=&quot;nav&quot;&gt;
                &lt;li class=&quot;divider-vertical&quot;&gt;&lt;/li&gt;
                &lt;li class=&quot;dropdown&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot;&gt;
                            Menu 1 &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;
                        &lt;/a&gt;

                    &lt;ul class=&quot;dropdown-menu&quot;&gt;
                        &lt;li&gt;&lt;a href=&quot;#/list&quot;&gt;Entry 1&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a href=&quot;#/list&quot;&gt;Entry 2&lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
              ....
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;

As far as I understand this is the proper, angular kind of way to implement such a dropdown menu. The &quot;wrong&quot; way, in terms of angularjs, would be to include bootstrap.js and to use &quot;data-toggle=&quot;dropdown&quot;... Am I right here?

Now I&#39;d like to add responsive behaviour to my navbar as done in the following Fiddle:
http://jsfiddle.net/ghtC9/6/

BUT, there&#39;s something I don&#39;t like about the above solution. The guy included bootstrap.js!

So what would be the correct angular kind of way to add responsive behaviour to my existing navbar?

I obviously need to use bootstraps responsive navbar classes such as &quot;nav-collapse collapse navbar-responsive-collapse&quot;. But I don&#39;t know how...


I&#39;d really appreciate your help!

Thank you in advance!
Michael




Responsive dropdown navbar with angular-ui bootstrap (done in the correct angular kind of way)

Using the example mentioned [here][1], how can I invoke the modal window using JavaScript instead of clicking a button?

I am new to AngularJS and tried searching the documentation [here][2] and [here][3] without luck.

Thanks


  [1]: http://plnkr.co/edit/ggtsdMSyYIRcXHe9zkw1?p=preview
  [2]: https://github.com/angular-ui/bootstrap/
  [3]: http://angular-ui.github.io/bootstrap/#/modal

Invoking modal window in AngularJS Bootstrap UI using JavaScript

I would like to combine AngularJS and Twitter Bootstrap into a fresh web app. It seems like [AngularJS directives have been written for Bootstrap](http://angular-ui.github.io/bootstrap/).

However, on careful look, it seems that these directives don&#39;t cover all of Bootstrap. Can I combine both the AngularUI Bootstrap code with the original Bootstrap to get completeness? Can it be done in the first place?

I stumbled on another Angular project called [AngularStrap](http://mgcrea.github.io/angular-strap/). Can I combine all three?


What is the best way to combine AngularJS and Twitter Bootstrap to get completeness? 

Best way to combine AngularJS and Twitter Bootstrap

I&#39;m writing a unit test for a controller that fires up a `$modal` and uses the promise returned to execute some logic. I can test the parent controller that fires the $modal, but I can&#39;t for the life of me figure out how to mock a successful promise.

I&#39;ve tried a number of ways, including using `$q` and `$scope.$apply()` to force the resolution of the promise. However, the closest I&#39;ve gotten is putting together something similar to the last answer in [this](https://stackoverflow.com/questions/15490150/angular-ui-bootstrap-testing-a-controller-that-uses-a-dialog) SO post;

I&#39;ve seen this asked a few times with the &quot;old&quot; `$dialog` modal.
I can&#39;t find much on how to do it with the &quot;new&quot; `$dialog` modal.

Some pointers would be tres appreciated.

To illustrate the problem I&#39;m using the [example provided in the UI Bootstrap docs](http://angular-ui.github.io/bootstrap/#/modal), with some minor edits.

**Controllers (Main and Modal)**

    &#39;use strict&#39;;
    
    angular.module(&#39;angularUiModalApp&#39;)
        .controller(&#39;MainCtrl&#39;, function($scope, $modal, $log) {
            $scope.items = [&#39;item1&#39;, &#39;item2&#39;, &#39;item3&#39;];
    
            $scope.open = function() {
    
                $scope.modalInstance = $modal.open({
                    templateUrl: &#39;myModalContent.html&#39;,
                    controller: &#39;ModalInstanceCtrl&#39;,
                    resolve: {
                        items: function() {
                            return $scope.items;
                        }
                    }
                });
    
                $scope.modalInstance.result.then(function(selectedItem) {
                    $scope.selected = selectedItem;
                }, function() {
                    $log.info(&#39;Modal dismissed at: &#39; + new Date());
                });
            };
        })
        .controller(&#39;ModalInstanceCtrl&#39;, function($scope, $modalInstance, items) {
            $scope.items = items;
            $scope.selected = {
                item: $scope.items[0]
            };
    
            $scope.ok = function() {
                $modalInstance.close($scope.selected.item);
            };
    
            $scope.cancel = function() {
                $modalInstance.dismiss(&#39;cancel&#39;);
            };
        });

**The view (main.html)**

    &lt;div ng-controller=&quot;MainCtrl&quot;&gt;
        &lt;script type=&quot;text/ng-template&quot; id=&quot;myModalContent.html&quot;&gt;
            &lt;div class=&quot;modal-header&quot;&gt;
                &lt;h3&gt;I is a modal!&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-body&quot;&gt;
                &lt;ul&gt;
                    &lt;li ng-repeat=&quot;item in items&quot;&gt;
                        &lt;a ng-click=&quot;selected.item = item&quot;&gt;{{ item }}&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
                Selected: &lt;b&gt;{{ selected.item }}&lt;/b&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-footer&quot;&gt;
                &lt;button class=&quot;btn btn-primary&quot; ng-click=&quot;ok()&quot;&gt;OK&lt;/button&gt;
                &lt;button class=&quot;btn btn-warning&quot; ng-click=&quot;cancel()&quot;&gt;Cancel&lt;/button&gt;
            &lt;/div&gt;
        &lt;/script&gt;
    
        &lt;button class=&quot;btn btn-default&quot; ng-click=&quot;open()&quot;&gt;Open me!&lt;/button&gt;
        &lt;div ng-show=&quot;selected&quot;&gt;Selection from a modal: {{ selected }}&lt;/div&gt;
    &lt;/div&gt;


**The test**

    &#39;use strict&#39;;
    
    describe(&#39;Controller: MainCtrl&#39;, function() {
    
        // load the controller&#39;s module
        beforeEach(module(&#39;angularUiModalApp&#39;));
    
        var MainCtrl,
            scope;
    
        var fakeModal = {
            open: function() {
                return {
                    result: {
                        then: function(callback) {
                            callback(&quot;item1&quot;);
                        }
                    }
                };
            }
        };
    
        beforeEach(inject(function($modal) {
            spyOn($modal, &#39;open&#39;).andReturn(fakeModal);
        }));
    
    
        // Initialize the controller and a mock scope
        beforeEach(inject(function($controller, $rootScope, _$modal_) {
            scope = $rootScope.$new();
            MainCtrl = $controller(&#39;MainCtrl&#39;, {
                $scope: scope,
                $modal: _$modal_
            });
        }));
    
        it(&#39;should show success when modal login returns success response&#39;, function() {
            expect(scope.items).toEqual([&#39;item1&#39;, &#39;item2&#39;, &#39;item3&#39;]);
    
            // Mock out the modal closing, resolving with a selected item, say 1
            scope.open(); // Open the modal
            scope.modalInstance.close(&#39;item1&#39;);
            expect(scope.selected).toEqual(&#39;item1&#39;); 
            // No dice (scope.selected) is not defined according to Jasmine.
        });
    });



Mocking $modal in AngularJS unit tests

I am using a Bootstrap dropdown menu. The problem is that it never drops down upon the first click; I need to click 2 times for it to be toggled. I guess the click event is somehow getting stuck somewhere before propagating down...

Is there any way to fix that?

Avoid having to double-click to toggle Bootstrap dropdown

I am using bootstrap date-picker in my angular application. However when I select a date from that date-picker underlying ng-model that I have bind gets updated I want that ng-model in one date format &#39;MM/dd/yyyy&#39;. but it every times makes date like this 

    &quot;2009-02-03T18:30:00.000Z&quot;

instead of 

    02/04/2009

I have created a plunkr for the same [plunkr link][1]

My Html and controller code is like below

    &lt;!doctype html&gt;
    &lt;html ng-app=&quot;plunker&quot;&gt;
      &lt;head&gt;
        &lt;script src=&quot;//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;example.js&quot;&gt;&lt;/script&gt;
        &lt;link href=&quot;//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
      &lt;/head&gt;
      &lt;body&gt;
    
    &lt;div ng-controller=&quot;DatepickerDemoCtrl&quot;&gt;
        &lt;pre&gt;Selected date is: &lt;em&gt;{{dt | date:&#39;MM/dd/yyyy&#39; }}&lt;/em&gt;&lt;/pre&gt;
        &lt;p&gt;above filter will just update above UI but I want to update actual ng-modle&lt;/p&gt;
        
    
        &lt;h4&gt;Popup&lt;/h4&gt;
        &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-md-6&quot;&gt;
                &lt;p class=&quot;input-group&quot;&gt;
                  &lt;input type=&quot;text&quot; class=&quot;form-control&quot;
                  datepicker-popup=&quot;{{format}}&quot; 
                  ng-model=&quot;dt&quot;
                  is-open=&quot;opened&quot; min-date=&quot;minDate&quot;
                  max-date=&quot;&#39;2015-06-22&#39;&quot; 
                  datepicker-options=&quot;dateOptions&quot; 
                  date-disabled=&quot;disabled(date, mode)&quot; 
                  ng-required=&quot;true&quot; close-text=&quot;Close&quot; /&gt;
                  &lt;span class=&quot;input-group-btn&quot;&gt; 
                    &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; ng-click=&quot;open($event)&quot;&gt;
                    &lt;i class=&quot;glyphicon glyphicon-calendar&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;/span&gt;
                &lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!--&lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-md-6&quot;&gt;
                &lt;label&gt;Format:&lt;/label&gt; &lt;select class=&quot;form-control&quot; ng-model=&quot;format&quot; ng-options=&quot;f for f in formats&quot;&gt;&lt;option&gt;&lt;/option&gt;&lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;--&gt;
    
        &lt;hr /&gt;
        {{dt}}
    &lt;/div&gt;
      &lt;/body&gt;
    &lt;/html&gt;

**Angular controller**

    angular.module(&#39;plunker&#39;, [&#39;ui.bootstrap&#39;]);
    var DatepickerDemoCtrl = function ($scope) {
    
    
      $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
    
        $scope.opened = true;
      };
    
      $scope.dateOptions = {
        formatYear: &#39;yy&#39;,
        startingDay: 1
      };
    
     
      $scope.format = &#39;dd-MMMM-yyyy&#39;;
    };
Thanks in advance for review my question.

**UPDATE**

I am calling below method for posting my data and VAR is array of size 900 which contains date-picker variables. 

    public SaveCurrentData(formToSave: tsmodels.ResponseTransferCalculationModelTS) {
    
            var query = this.EntityQuery.from(&#39;SaveFormData&#39;).withParameters({
                $method: &#39;POST&#39;,
                $encoding: &#39;JSON&#39;,
                $data: {
                    VAR: formToSave.VAR,
                    X: formToSave.X,
                    CurrentForm: formToSave.currentForm,
                }
            });
    
            var deferred = this.q.defer();
    
            this.manager.executeQuery(query).then((response) =&gt; {
                deferred.resolve(response);
            }, (error) =&gt; {
                    deferred.reject(error);
                });
    
            return deferred.promise;
        }

  [1]: http://plnkr.co/edit/AtjFPbGggVvLLvz69BvH?p=preview

Angular bootstrap datepicker date format does not format ng-model value

I have a watch setup against the model of a ui-select2 dropdown (from ui-bootstrap).  The watch fires on load but not on data changes and I can&#39;t figure out why.  

It isn&#39;t the usual problem of not $apply&#39;ing the model change or not using the third parameter for equality comparison (at least from my code).

What do I need to do to get it to fire?

[Here is a plunk demonstrating the issue.][1]


  [1]: http://plnkr.co/edit/xsclxVpkOgpIKwSK4S1d?p=preview

All Angular Ui-Bootstrap Solutions on Gang of Coders

Total of 16 Angular Ui-Bootstrap Solutions