I am trying to use angular-ui&#39;s tooltip functionality to show my user that a particular field is invalid but it seems that the tooltip can be shown only on some pre-defined triggers. Is there any way by which I can trigger the tooltip except those triggers?

For example:

    &lt;input
        type=&quot;text&quot;
        tooltip=&quot;Invalid name!&quot;
        tooltip-position=&quot;right&quot;
        tooltip-trigger=&quot;myForm.username.$invalid&quot;&gt;


Enable angular-ui tooltip on custom events

I&#39;m currently testing out angular `bootstrap-UI` locally on my machine. When I try to recreate the example of accordion and dialog box. I get this error message in my console saying that template is missing. 

&gt;Example of error: 
    404 Not Found - localhost/angular/template/message.html

When I look into `ui-bootstrap-0.1.0.js` the directive have a template `URL`.

What&#39;s the purpose of the `templateURL` for the directive? 

Are those template suppose to be included when I download the whole angular `bootstrap-UI` zip file?

Am I missing other files that I should have include in my header?

    &lt;link rel=&quot;stylesheet&quot; href=&quot;includes/css/bootstrap.css&quot;&gt;
    &lt;script src=&quot;includes/js/angular.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;includes/js/ui-bootstrap-0.1.0.js&quot;&gt;&lt;/script&gt;



Angular ui bootstrap directive template missing

This is probably simple but I can&#39;t find anything in the docs and googling didn&#39;t help. I&#39;m trying to define a state in `$stateProvider` where the URL I need to hit on the server to pull the needed data depends on a state URL parameter. In short, something like:
 

     .state(&#39;recipes.category&#39;, {
        url: &#39;/:cat&#39;,
        templateUrl: &#39;/partials/recipes.category.html&#39;,
        controller: &#39;RecipesCategoryCtrl&#39;,
        resolve: {
          category: function($http) {
            return $http.get(&#39;/recipes/&#39; + cat)
              .then(function(data) { return data.data; });
          }
        }
      })

The above doesn&#39;t work. I tried injecting `$routeParams` to get the needed `cat` parameter, with no luck. What&#39;s the right way of doing this? 


ui-router resolve with dynamic parameters

Here is my plnkr: http://plnkr.co/edit/n8cRXwIpHJw3jUpL8PX5?p=preview You have to click on a li element and the form will appear. Enter a random string and hit &#39;add notice&#39;. Instead of the textarea text you will get undefined.

Markup:

    &lt;ul&gt;
        &lt;li ng-repeat=&quot;ticket in tickets&quot; ng-click=&quot;select(ticket)&quot;&gt;
             {{ ticket.text }}
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div ui-if=&quot;selectedTicket != null&quot;&gt;
         &lt;form ng-submit=&quot;createNotice(selectedTicket)&quot;&gt;
            &lt;textarea ng-model=&quot;noticeText&quot;&gt;&lt;/textarea&gt;
            &lt;button type=&quot;submit&quot;&gt;add notice&lt;/button&gt;
        &lt;/form&gt;
    &lt;/div&gt;

JS part:

    $scope.createNotice = function(ticket){
       alert($scope.noticeText);
    }

returns &#39;undefined&#39;. I noticed that this does not work when using ui-if of angular-ui. Any ideas why this does not work? How to fix it?

Cannot get textarea value in angularjs

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 Angular-UI typeahead in the following way:

    &lt;input type=&quot;text&quot; ng-model=&quot;myModel&quot; typeahead=&quot;o.value as o.text for o in options | filter:$viewValue | limitTo:5&quot; typeahead-editable=&quot;false&quot; /&gt;

binded to a model like:

    var options = [
        {&quot;value&quot;: 1, &quot;text&quot;: &quot;value1&quot;},
        {&quot;value&quot;: 2, &quot;text&quot;: &quot;value2&quot;},
        ...
    ];

It correctly shows options text, but when I select an item it shows inside the textbox the value. The model is correctly bounded to the value only (not the entire model object).

Is it possible to show inside the textbox the &quot;text&quot; (not the &quot;value&quot;) after selection, still maintaining model binding to just the value (ie: when I select a certain &quot;text&quot; the model is updated with the &quot;value&quot;)?


Angular-UI typeahead: show label but bind to value only

I have a date stored as a Date in SQL Server. The date shows 4/24/2014 when I query in SQL. That is correct. The date is correctly brought over to the client side in UTC. To edit that date we&#39;re using the Angular UI DatePicker. The DatePicker is adjusting that date based on my local timezone and so it is always off by one day. 

I can see that it&#39;s happening. If we were editing a DateTime instead of a Date, then it would be correct to adjust for the timezone. However, in this case, I just have a Date, so I don&#39;t care about timezone and I just want to edit the date as it was in the database. 

I can verify that it&#39;s adjusting for timezone. If I change the timezone on my windows machine to be UTC then the DatePicker does show the correct date. 

So, the question is, is there a way to tell the DatePicker to turn off the timezone adjustments and just manage dates in UTC format so that it will work with a SQL Date instead of a SQL Datetime? 



Angular UI DatePicker adjusting for timezone

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 have a Service:

    angular.module(&#39;cfd&#39;)
      .service(&#39;StudentService&#39;, [ &#39;$http&#39;,
        function ($http) {
        // get some data via the $http
        var path = &#39;data/people/students.json&#39;;
        var students = $http.get(path).then(function (resp) {
          return resp.data;
        });     
        //save method create a new student if not already exists
        //else update the existing object
        this.save = function (student) {
          if (student.id == null) {
            //if this is new student, add it in students array
            $scope.students.push(student);
          } else {
            //for existing student, find this student using id
            //and update it.
            for (i in students) {
              if (students[i].id == student.id) {
                students[i] = student;
              }
            }
          }
        };

But when I call `save()`, I don&#39;t have access to the `$scope`, and get `ReferenceError: $scope is not defined`. So the logical step (for me), is to provide save() with the `$scope`, and thus I must also provide/inject it to the `service`.  So if I do that like so:

      .service(&#39;StudentService&#39;, [ &#39;$http&#39;, &#39;$scope&#39;,
                          function ($http, $scope) {

I get the following error: 

&gt; Error: [$injector:unpr] Unknown provider: $scopeProvider &lt;- $scope &lt;-
&gt; StudentService

The link in the error (wow that is neat!) lets me know it is injector related, and might have to do with order of declaration of the js files.   I have tried reordering them in the `index.html`, but I think it is something more simple, such as the way I am injecting them.

Using Angular-UI and Angular-UI-Router

Injecting $scope into an angular service function()

In AngularJS, I see sometimes we use `$state.transitionTo()` and sometimes we use `$state.go()`. Can anyone tell me how they differ and when one should be used over the other?

Difference between $state.transitionTo() and $state.go() in Angular ui-router

Using angular-ui-router, How can I use the [otherwise method][1] on [$stateProvider][2] or how can I use it at all ? 


  [1]: http://docs.angularjs.org/api/ng.$routeProvider
  [2]: https://github.com/angular-ui/ui-router/wiki

Otherwise on StateProvider

I&#39;m using the angular ui-bootstrap typeahead and I would want to use it as a way to pick up many choices, so I&#39;d need to get the selected value when selectMatch method is launched but I can&#39;t find how to do that in my controller

    &lt;div class=&#39;container-fluid&#39; ng-controller=&quot;TypeaheadCtrl&quot;&gt;
    &lt;pre&gt;Model: {{selected| json}}&lt;/pre&gt;
    &lt;input type=&quot;text&quot; ng-model=&quot;selected&quot; typeahead=&quot;state for state in states | filter:$viewValue&quot;&gt;
&lt;/div&gt;

If I watch the selected value, I got the change every time a key is pressed...

    scope.$watch(&#39;selected&#39;, function(newValue, oldValue) {... });

I got that the method selectMatch is the one which is called when the user press enter or click on the list but I don&#39;t know how to have a callback on that...

Thanks !



angular ui-bootstrap typeahead callback on selectMatch?

I am using Angular UI $modal in my project 
http://angular-ui.github.io/bootstrap/#/modal 

I don&#39;t want user to close the modal by pressing on backdrop. I want a modal can only be closed by pressing close button which I have created. 

How do I prevent modal from closing ?

How do I prevent angular-ui modal from closing?

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?

I&#39;m using AngularUI&#39;s routing and I&#39;d like to do a `ng-class=&quot;{active: current.state}&quot;` but I&#39;m unsure how to exactly detect the current state in a directive like this.

How to detect current state within directive

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 trying to implement an &quot;open link in new tab&quot; function using $state.go function. It would be awesome if there was smth like:

    $state.go(&#39;routeHere&#39;, {
	    parameter1 : &quot;parameter&quot;
		}, {
		reload : true,
		newtab : true // or smth like target : &quot;_blank&quot;
	});

Is there any way to do that using AngularJS?

				



Angularjs $state open link in new tab

I want to catch the enter key press event on the textbox below. To make it more clear I am using a `ng-repeat` to populate the tbody. Here is the HTML: 
  
  

    &lt;td&gt;&lt;input type=&quot;number&quot; id=&quot;closeqty{{$index}}&quot; class=&quot;pagination-right closefield&quot; 
        data-ng-model=&quot;closeqtymodel&quot; data-ng-change=&quot;change($index)&quot; required placeholder=&quot;{{item.closeMeasure}}&quot; /&gt;&lt;/td&gt;


This is my module:

    angular.module(&#39;components&#39;, [&#39;ngResource&#39;]);

I am using a resource to populate the table and my controller code is:

    function Ajaxy($scope, $resource) {
    //controller which has resource to populate the table 
    }



How to use a keypress event in AngularJS?

I have searched for a similar question but the ones that came up seem slightly different.
I am trying to change the ui-sref=&#39;&#39; of a link dynamically (this link points to the next section of a wizard form and the next section depends on the selection made on the dropdown list). I am simply trying to set the ui-sref attribute depending on some selection in a select box. I am able to change the ui-sref by binding to a scope attribute which is set when a selection is made. however the link does not work, is this possible at all? thanks

      &lt;a ui-sref=&quot;form.{{url}}&quot; &gt;Next Section&lt;/a&gt;

and then in my controller, I set the url parameter this way 

    switch (option) {
      case &#39;A&#39;: {
        $scope.url = &#39;sectionA&#39;;
      } break;
      case &#39;B&#39;: {
        $scope.url = &#39;sectionB&#39;;
      } break;
    }

Alternatively, I used directives to get it to work by generating the hyperlink with the desired ui-sref attribute according to the option selected on the select box (drop down).

Hhowever this means I have to re-create the link each time a different option is selected from the selectbox which causes an undesirable flickering effect. 
My question is this, is it possible to change the value of the ui-sref as I tried doing above by simpling changing the value of url in my controller or do I have to re-create the entire element using a directive each time a selection is made as I have done below? (just showing this for completeness)


## Select option directive (this directive generates the link directive)

    define([&#39;app/js/modules/app&#39;, &#39;app/js/directives/hyperLink&#39;], function (app) {
    app.directive(&#39;selectUsage&#39;, function ($compile) {

        function createLink(scope,element) {
            var newElm = angular.element(&#39;&lt;hyper-link&gt;&lt;/hyper-link&gt;&#39;);
            var el = $(element).find(&#39;.navLink&#39;);
            $(el).html(newElm);
            $compile(newElm)(scope);
        }

        return {

            restrict: &#39;E&#39;,
            templateUrl: &#39;/Client/app/templates/directives/select.html&#39;
           
            ,link: function (scope, element, attrs) {

                createLink(scope, element);

                element.on(&#39;change&#39;, function () {
                    createLink(scope,element);
                })
            }
        }
    })


## Hyperlink directive

    define([&#39;app/js/modules/app&#39;], function (app) {
    app.directive(&#39;hyperLink&#39;, function () {

        return {
            restrict: &#39;E&#39;,
            templateUrl: &#39;/Client/app/templates/directives/hyperLink.html&#39;,
            link: function (scope, element, attrs) { }
        }

    })

## Hyperlink template

    &lt;div&gt;
        &lt;button ui-sref=&quot;form.{url}}&quot;&gt;Next Section&lt;/button&gt;
    &lt;/div&gt;


Dynamically set the value of ui-sref Angularjs

Sorry for the silly question, does everyone know how to start using AngularUI? I&#39;ve downloaded it from Github and read the instruction in README but still don&#39;t understand what I have to do.

How to integrate AngularUI to AngularJS?

Consider the following:

    .state(&#39;manager.staffList&#39;, {url:&#39;^/staff?alpha&#39;, templateUrl: &#39;views/staff.list.html&#39;, data:{activeMenu: &#39;staff&#39;}, controller: &#39;staffListCtrl&#39;})
    .state(&#39;manager.staffDetail&#39;, {url:&#39;^/staff/{id}&#39; , templateUrl: &#39;views/staff.html&#39;, data:{activeMenu: &#39;staff&#39;}, controller: &#39;staffDetailsCtrl&#39;})
      .state(&#39;manager.staffDetail.view&#39;, {url:&#39;/view&#39;,  templateUrl: &#39;views/staff.details.html&#39;, data:{activeMenu: &#39;staff&#39;}})
        .state(&#39;manager.staffDetail.view.schedule&#39;, {url:&#39;/schedule&#39;, templateUrl:&#39;views/staff.view.schedule.html&#39;, data:{activeMenu: &#39;staff&#39;}})
        .state(&#39;manager.staffDetail.view.history&#39;, {url:&#39;/history&#39; , templateUrl:&#39;views/staff.view.history.html&#39;, data:{activeMenu: &#39;staff&#39;}})
        .state(&#39;manager.staffDetail.view.log&#39;, {url:&#39;/log&#39;, templateUrl:&#39;views/staff.view.log.html&#39;, data:{activeMenu: &#39;staff&#39;}})
        .state(&#39;manager.staffDetail.view.files&#39;, {url:&#39;/files&#39;, templateUrl:&#39;views/staff.view.files.html&#39;, data:{activeMenu: &#39;staff&#39;}})
      .state(&#39;manager.staffDetail.edit&#39;, {url:&#39;/edit&#39;,  templateUrl: &#39;views/staff.edit.html&#39;, data:{activeMenu: &#39;staff&#39;}})

If I go to `domain.com/staff/1234/view`, how do I default to the `manager.staffDetail.view.schedule` child state?


Directing the user to a child state when they are transitioning to its parent state using UI-Router

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)

I need to pass and recieve two parameters to the state I want to transit to using `ui-sref` of ui-router.

Something like using the link below for transitioning the state to `home` with `foo` and `bar` parameters:

    &lt;a ui-sref=&quot;home({foo: &#39;fooVal&#39;, bar: &#39;barVal&#39;})&quot;&gt;Go to home state with foo and bar parameters &lt;/a&gt;

Receiving `foo` and `bar` values in a controller:

    app.controller(&#39;SomeController&#39;, function($scope, $stateParam) {
      //..
      var foo = $stateParam.foo; //getting fooVal
      var bar = $stateParam.bar; //getting barVal
      //..
    });     

I get `undefined` for `$stateParam` in the controller.

Could somebody help me understand how to get it done?

**Edit:**

    .state(&#39;home&#39;, {
      url: &#39;/&#39;,
      views: {
        &#39;&#39;: {
          templateUrl: &#39;home.html&#39;,
          controller: &#39;MainRootCtrl&#39;
    
        },
    
        &#39;A@home&#39;: {
          templateUrl: &#39;a.html&#39;,
          controller: &#39;MainCtrl&#39;
        },
    
        &#39;B@home&#39;: {
          templateUrl: &#39;b.html&#39;,
          controller: &#39;SomeController&#39;
        }
      }
    
    });



How to pass parameters using ui-sref in ui-router to controller

The typeahead example (http://angular-ui.github.io/bootstrap/#/typeahead) mentions it&#39;s easy to implement a back end into this autocomplete, but provides no example. What interests me in particular is finding out the currently entered string so that I can send *that* to the server and send back an already filtered result - I would like to do this optimization server-side and minimize my queries, I don&#39;t think returning the whole result set and just excluding non-matching items for display is feasible for an app that has over 200,000 entries in the database.

Should I, in this case, forget about typeahead altogether and implement a custom solution with a dropdown, or is there a way to do this easily?

How to tie angular-ui&#39;s typeahead with a server via $http for server side optimization?

How do I extract query parameters using [ui-router][1] for AngularJS? 

In AngularJS&#39; own `$location` service I did:  

&gt; ($location.search()).uid

to extract the parameter uid from a URL. What is the corresponding code for ui-router?


  [1]: https://github.com/angular-ui/ui-router

How to extract query parameters with ui-router for AngularJS?

Am using the angular bootstrap to present a modal. But my requirement is to prevent pop-up dismissal when clicking outside the modal, or when the escape key is pressed.

I followed the tutorial on the angular bootstrap site :http://angular-ui.github.io/bootstrap/

![enter image description here][1]


  [1]: http://i.stack.imgur.com/C9KyI.png

angular js: Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?

First off, I&#39;m no pro.

In my quest to become a better developer I am trying to understand what is needed and how to accomplish creating a sign-up/login for an Ionic-Framework app.

Most of the single-page-applications (SPAs) handle authentication on a node server that is also serving up the HTML for the client. In my case the phone itself will be serving up the HTML so I am guessing I may be going up against some CORs issues.

I understand that the Ionic-Framework uses states and based [angular-client-side-auth][1] repo I should be authenticating whenever I am changing states in my app.

I have an initial app setup but now I am kind of confused where to go from here.

The tools I have at my disposal:

 - Node.JS Server -Thanks DigitalOcean (Should I be using this as a proxy to my DB?)
 - CouchDB server (Full stack here we come)

**Questions of mine:**

 

 1. What is the standard approach for authenticating when using hybrid apps?
 2. Should I be using Node.JS as a proxy to the database?
 3. Should I skip node.js and authenticate directly with the CouchDB server? (I&#39;ve heard of this)
 4. Am I going about this all the wrong way?
 5. What are my potential road-blocks? 
 6. How does CORS work with hybrid applications?
 7. Anything I&#39;m missing?

Thanks for helping me become a better developer.

  [1]: https://github.com/fnakstad/angular-client-side-auth

Authentication in Ionic/Cordova App

I am new to angularjs. How can I detect userAgent in angularjs. Is it possible to use that in controller? Tried something like below but no luck!


      var browserVersion = int((/msie (\d+)/.exec(lowercase(navigator.userAgent)) || [])[1]);


I need to detect IE9 specifically!

How to detect browser using angularjs?

I&#39;ve just upgraded to `ui-router 0.2.8` from `0.2.0` and I&#39;ve noticed that when the state changes, the scroll position jumps to the top of te child `ui-view` that is the subject of the new state.

This is fine but I have two problems with it:

1) I have 30px padding between the top of the page and the `ui-view` and I would like it to scroll to the top of the page, leaving a gap. At the moment it goes exactly to the top of the `ui-view` which looks ugly. To achieve this I guess I either need to know how to get it to scroll to the top of the div that the ui-view is in (not the browser `viewport`), or I need to find out how to override `$uiViewScroll` to scroll to the `ui-view` minus 30px.

I have tried `$uiViewScrollProvider.useAnchorScroll();` but if I do that it doesn&#39;t scroll at all. I have also tried `&lt;ui-view autoscroll=&quot;false&quot;&gt;;`, which also stops the scrolling completely.

2) It doesn&#39;t actually scroll at the moment, just jumps. Is it suppose to scroll or is it up to the developer to do this with CSS transitions?

Any help would really be appreciated :)

Angular ui-router scroll to top, not to ui-view

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

How can I check if a given input control is empty? I know there is `$pristine` property on the field which tells that if a given field is empty initially but what if when someone fill the field and yanks the whole content again?

I think above feature is necessary as its important for telling the user that field is required.

Any idea will be appreciated!

Check if a input box is empty

I&#39;m using Angular UI Router and would like to reload the current state and refresh all data / re-run the controllers for the current state and it&#39;s parent.

I have 3 state levels: **directory.organisations.details**

**directory.organisations** contains a table with a list of organisations. Clicking on an item in the table loads **directory.organisations.details** with $StateParams passing the ID of the item. So in the details state I load the details for this item, edit them and then save data. All fine so far. 

Now I need to reload this state and refresh all the data.

I have tried:

     $state.transitionTo(&#39;directory.organisations&#39;);

Which goes to the parent state but doesn&#39;t reload the controller, I guess because the path hasn&#39;t changed. Ideally I just want to stay in the **directory.organisations.details** state and refresh all data in the parent too.

I have also tried:

    $state.reload()

I have seen this on the API WIKI for $state.reload &quot;(bug with controllers reinstantiating right now, fixing soon).&quot;

Any help would be appreciated?

How to reload the current state?

I have several `$timeout` expressions in Modal controller

    App.controller(&#39;ModalCtrl&#39;, function ($scope, $timeout) {
        for (var i = 0; i &lt; 10; i++) {
            (function () {
                var timer = $timeout(function () {
                    console.log(&#39;timer&#39;)
                }, 1000);
            })()
        }
    })

I need to clear all the timers when invoking the modal:

    App.controller(&#39;MainCtrl&#39;, function ($scope, $modal, $timeout) {
        $scope.showMap = function () {
            var modal = $modal.open({
                templateUrl: &#39;modalap.html&#39;,
                controller: &#39;modalCtrl&#39;,
            })
    
            modal.result.then(function () { //fires when modal is resolving
            }, function () { //fires when modal is invoking
            });
        } })

How can I do that? 

PS Sorry for bad code formatting. I don&#39;t know why but I cant format it better. I duplicated code [here][1]: 


  [1]: http://jsfiddle.net/VzQLU/1/

AngularJS. Clear $timeout when invoking angular-ui modal

The [angular ui-router](https://github.com/angular-ui/ui-router) allows *multiple nested views*.  The role of these interchangeable views seems to overlap the role of directives.

What are the pros/cons to using (multiple, nested) **`ui-view`s** vs angular&#39;s **directives**?

### UPDATE

States and routing are 2 different functions.  States allow you to swap out partial.html templates and their controllers, and you can [(optionally?)](https://stackoverflow.com/questions/22791071/angular-ui-router-can-you-change-state-without-changing-url) specify a corresponding URL/route.

In an email response from Tim Kindberg (a `ui-router` dev):

&gt; ui-view is a directive, so if you use it you are using a directive
&gt; that has been worked on particular to work well with the rest of the
&gt; ui-router module. I can&#39;t imagine it being easy to roll your own
&gt; directive to replace this functionality.

And to this, it seems you could have 2 options:

**Normal Directives:**

    app.directive(&#39;myDir1&#39;, {/*  controller: ... */})
       .directive(&#39;myDir2&#39;, {/*  controller: ... */}) 

vs **ui-view &quot;Directives&quot;**

    $stateProvider.state(&#39;route1&#39;, {
         /*  url: &quot;/route1&quot;, // optional?? */
          views: {
            &quot;myDir1&quot;: { templateUrl: &quot;myDir1.html&quot; /* , controller: ... */ },
            &quot;myDir2&quot;: { templateUrl: &quot;myDir2.html&quot; /* , controller: ... */ }
          }
        })

Bonus question:

Are [normal angular directive features](http://docs.angularjs.org/api/ng/service/$compile) available to views?  Such as:

 - Transclude
 - Replace
 - Isolate scoping
 - Compile / linking functions

If ui-views ARE directives, it seems clear their usage is different.  Wouldn&#39;t it make sense to harmonize these models?

Angular ui-router: ui-views vs directives?

    &lt;html ng-app=&quot;app&quot;&gt;
    &lt;head&gt;
    ...
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id=&quot;header&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;notification&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;container&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;footer&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
With the given structure of the app (derived from angular-app):

* header: Here the site navigation, login/out toolbar etc comes in. This is dynamic and has it&#39;s own Controller
* notification: Global notification container. 
* container: This used to be my `&lt;ng-view&gt;`. So this is where all other modules loads in.
* footer: Global footer.

How do the state hierarchy looks like? I&#39;ve gone through the example which shows a single module (contacts) but typically an app would have a global (root) state and inside the root state other module states are rendered.

What I&#39;m thinking is my `app` module probably  have the `root` state and then each module should have it&#39;s own state and I have to *inherit* from `root` state. Am I right?

Also from `ui-state` example, they have used both `$routeProvider` and `$urlRouterProvider` as well as `$stateProvider` has url defined. My understand was `$stateProvide` also handles routing. If I&#39;m wrong, which provider should I use for routing?

**EDIT**: http://plnkr.co/edit/wqKsKwFq1nxRQ3H667LU?p=preview

Thanks!

All Angular Ui Solutions on Gang of Coders

Total of 36 Angular Ui Solutions