I'm still not sure why i can't ref to the translation module inline the pagination tags but if i inject the translation module into my controller, i can then look up the values an insert them into a scope variable, and then ref to it from html Like shown below...

You should have some different ng-model name you already used owner in ng-options like selectedOwner <button type="button" class="btn btn-default" placeholder="Pleasae select" data-ng-model="selectedOwner" data-html="1" bs-options="owner as owner.fullName for owner in accountInfo.owners" bs-select> Action <span class="caret"></span> </button> Then you need to set value of ng-model from controller. $scope.selectedOwner = $scope.accountInfo.owners[0]; ...

The resolve parameters are only injected to the controller defined in the $modal.open config parameters, but you want to inject it to the directive controller. That will not work. Imagine you would use the myModal directive somewhere else, there wouldn't be a myData object that could be used. But i...

Ok, what you wan't to do is not supported by the ui bootstrap module, so we need to extend the module to get the requested behavior. To do that we will use decorators: .config(function($provide) { // This adds the decorator to the tabset directive // @see https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js#L88 $provide.decorator('tabsetDirective', function($delegate) {...

If I understand correctly what you are after you don't need to pass the whole list of items to your modal, you should only pass the item the user has clicked on. This is actually the item that is passed as argument to your viewItem function, so you would have...

If you just dont want any item to have the highlight then in your own custom app.css file override the focus state with white: .dropdown-menu > li > a:focus { background-color: white; } Without doing a custom bootstrap build just add the hover following the focus to to keep the...

Well It was definitely on the datepicker-options but it doesn't works because of a problem due to a bug in angular-ui-bootstrap 0.12.1.0. This problem is solve in the latest version of angular-ui-bootstrap (0.13.0)

As promised on GitHub, I would take a look at your question. To answer your question: no. With a far-fetched yes. You could probably go all the way and invest quite some time to make UI Bootstrap's typeahead work for your implementation but there are better solutions out there that...

Never mind, I actually found a solution which does not involve dynamic localization. As proposed by will Farrrell, I detect the user's locale right in the header of my index.html and load the according locale: var locale = window.navigator.userLanguage || window.navigator.language; if (locale) { var smallLocale = locale.toLowerCase(); document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.2.15/angular-locale_'...

EDITED: Plunker Demo Here's how it works (the still long and exhaustive explanation): Create a custom directive that allows you to target the trigger element. Create a custom directive that is added to the body and will find the trigger element and fire the custom event when it is clicked....

Solution to this problem required modal window to be appended to the element of my choice (in this case, element that goes full screen). To accomplish this, I updated the angular bootstrap modal's code so that options object we pass to the $modal.open() function now accepts an appendTo property which...

The first thing I'll point out is that you're not actually using angular-ui-bootstrap, you're using the jQuery version without angular directives, and by doing so making life harder for yourself. If you're going to do much more with this or making more modals I recommend switching. You can still make...

You can achieve it by overriding popover-content class: .popover-content { width: 200px; } UPDATE: You can check this in Chrome: - press F12 - select the magnifier - click on the element to inspect - modify its style ...

By default the dropdown will automatically close if any of its elements is clicked, you can change this behavior by setting the auto-close option as follows: always - (Default) automatically closes the dropdown when any of its elements is clicked. outsideClick - closes the dropdown automatically only when the user...

Updated Fiddle The is-open attribute on the UI Bootstrap accordion-group directive points to a bindable expression. The expression must be a boolean that resolves to either true or false. If the value is true, the accordion group is opened. The is-open attribute is a two-way binding, meaning that whenever the...

The reason your values do not persist is because they are being overriden: <accordion-group heading="Model" is-open="selectedCar.make" is-disabled="!selectedCar.make"> The attribute is-open="selectedCar.make" will actually set selectedCar.make to false once the accordion is closed. Same goes for all other values. Here's a working plunker. (also containing fixes to a few other problems like...

Updated Plunker The main issue is that you're trying to use Bootstrap's jQuery-based plugins (bootstrap.js) in your AngularJS app along with UI-Bootstrap. I swapped your modal for the UI-Bootstrap modal implementation. UI Bootstrap has no dependency on the bootstrap.js, or jQuery for that matter, so I removed both from the...

Thanks to alienx's answer to my question here: How can I disable an accordion-group *after* I open it? I was able to understand more of how to use booleans to manipulate functionality. Here is the solution to my question: HTML <accordion class="m3Details" close-others="false"> <accordion-group is-open="buildingsOpen"> <accordion-heading><span class="noQuery">Building<span class="caret"></span></span></accordion-heading> <li ng-repeat="y...

Looks like you are instantiating the controller with ng-controller directive in the modal view. Instead you only need to use controller option of the modal in order to get the special dependency $modalInstance injected. If you have instantiated controller using ng-controller="LoginController" you need to remove it and you would not...

You have to replace your type from <alert ng-repeat="alert in alertForm.alerts" type="{{alertForm.alert.type}}" close="closeAlert($index)" class="text-center">{{alert.msg}}</alert> to <alert ng-repeat="alert in alertForm.alerts" type="{{alert.type}}" close="closeAlert($index)" class="text-center">{{alert.msg}}</alert> In your scope, the object alertForm.alert doesn't exist, thus alertForm.alert.type is undefined. So the default type of the alert is used which is warning. You can find the...

You can use the max-mode property and set it to day and will disable that button. <datepicker max-mode="day" ng-model="dt"></datepicker> Have a look here: http://plnkr.co/edit/5I8QQiI3dLvOpyDjd2fk?p=preview...

There is no need to modify the angular-ui-bootstrap carousel, just display a row with two or three columns inside the carousel. This is a my fork of the original angular-ui-bootstrap carousel plunkr: http://plnkr.co/edit/F2h3gIQKzpkjymZDgrK6 The short version is: <slide ng-repeat="slide in slides" active="slide.active"> <div class="row"> <div class="col-xs-6"> ... first cell </div>...

Unfortunately, the code you linked does not run correctly. Just from looking at the source, I believe your issue might be with your function call. Try changing data-ng-click="mldUserInformationCtrl.cancel()" to just data-ng-click="cancel()"...

So, here I've put together a jsBin which demonstrates how to do this with your code. You can't use the $modal service in your .config section, as services are not available at that state of Angular bootstrapping (perhaps some $modalProvider is, but I'm not sure). So, you can set the...

Well the solution in the problem you linked to was to use a linear gradient like this: .css-class-to-highlight a { background: linear-gradient(red 50%, green 50%); } I'm not sure what it buys you, but you can use a linear-gradient() and specify the angle in degrees like this: div[datepicker] table td...

Using of old version of angular-block-ui v0.0.12 was creating the focus losing problem. Found an issue https://github.com/McNull/angular-block-ui/issues/37. Updating angular-block-ui version to v0.1.0-beta.3 or upper will fix the problem.

In AngularJS, you don't manipulate the DOM in a controller. You do that with a directive. AngularJS has lots of a built-in directives that you can use to manipulate the DOM, one of which is ngStyle. Of course, you can also create your own directives. For these examples, you don't...

You can create a toggle() function which will call the function you want based on a variable tracking the state. You can then simply use this function in your template as ng-click="toggle()". Something like this. var toggled = false; $scope.toggle = function() { if (toggled) { $scope.clear(); } else {...

So I ended up taking what @user2943490 recommended and tweaked it a little bit for my use case. I created a directive that I added to the Modal Template. Inside I check every 100ms to see if the modal-content class exists. If the class exists we know that the modal...

Usually when Angular is in full control of a callback it participates in a digest cycle. A digest cycle means that any changes to your models are automatically propagated to all watchers - for example any bindings you have in HTML. This is the case with directives and things like...

If you are adopting AngularJS as your front-end single-page framework, and Grails as your REST API server, for the separation of concerns I would adopt a separate package manager like bower for managing the dependencies that are required on the client side and use Grails plugins only for managing server-side...

A BIG shoutout to camden_kid for catching my mistake of misspelling ng-model. I accidentally did ng-modal. Just correcting that spelling didn't fix it though. I don't know why (maybe someone can help explain), but I had to use an object that was already created to get this to work. Just...

Here's the line-by-line breakdown: $scope.checkout = function (cartObj) { A $scope variable named checkout is being created which references a function so that you can call it in the view as checkout() (for example from a button with ng-click="checkout"). This function is passed a service called cartObj. var modalInstance =...

You can use angular.config in your case that would be use for configuration purpose Constant var app = angular.module('app',[]) .config('constants', { id: 1, tab: 'test', description: 'test' }); Now you created a config which will available everywhere, you can also extend this anywhere using angular.extend({}, object1, object2) Controller app .controller('Ctrl',fuction($scope,...

The last version of ui-bootstrap that was compatible with Bootstrap CSS 2.3.x was ui-bootstrap 0.8.0. So you need to either update Bootstrap CSS to 3.x or stick with ui-bootstrap 0.8.0. This version of the library (0.13.0) works only with Bootstrap CSS in version 3.x. 0.8.0 is the last version of...

The "Z" in the ISO 8601 date format stands for UTC. Therefore, depending on the current local timezone offset, your results may vary. For example, I am located on the east coast in the US. When daylight savings is being observed here, my timezone offset is UTC−04:00, otherwise it is...

Your submit button is outside of the <form> element. Submit via Enter key is a browser feature, not a feature of AngularJS. When hitting Enter the browser tries to find finds first submit button and submits the form by emulating click event on it. When the submit button is outside...

Just downgrade the ui-bootstrap version to 0.12.0. There is a bug in 0.13.0 that makes the animation not work. <html> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script...

The issue is that the anchor that's handling the toggle is wrapped around the header text rather than the div. I would style the content of the heading with negative margins and matching positive paddings corresponding to the padding values of the heading panel in order to expand the clickable...

I found out that datepicker is using two values. One for model, one for input. This works if you enter date by selecting it from popup, although not working if typing it in input field. I have solved this issue by putting readonly attribute to input field....

I think your best bet is to use a Custom Template, as described in the Typeahead example with the flags, instead of putting markup into your data. You'd change your data to be like this: {name: "Las Vegas McCarran International (LAS)", country: "United States", iata: "LAS"} and use a template...

If I understood the question, you want to add a button to the alert that will launch a modal. Plunker Demo The easiest approach is to simply add your button into the alert template. In the Plunker demo, I copied both the contents of the UI Bootstrap alert and modal...

If you want to customize the column footer , you need to provide a footerCellTemplate to the column. The footerTemplate can be configured to only show two decimals footerCellTemplate: '<div class="ui-grid-cell-contents">\'Total\' (capital \'T\') {{col.getAggregationValue() | number:2 }}</div>' http://plnkr.co/edit/u75EC8gxdIBxHzthaH15?p=preview shows an example where you can change the label and decimals....

What I ended up doing is: document.querySelector('.left.carousel-control').setAttribute('ng-click', 'customFunction()'); $compile(document.querySelector('.left.carousel-control'))(scope); And this solves my problem. ...

to use the value you pass to the modal, you need to put it on its scope, so set the modal controller as so: myAppModule.controller('modalInstanceController', function ($scope, $modalInstance, message) { $scope.message = message; }); and remove the ng-controller from modal.html, you are already assigning him a controller when you create...

You can broadcast a method to communicate try like this In modal controller where close button is triggered $rootScope.$broadcast('updateList'); If you wanna to pass data from modal $rootScope.$broadcast('updateList',{data : 'passing'}); // pass object in {} if you wanna to pass anything In data Controller $scope.$on("updateList",function(){ // Post your code });...

This actually fairly simple to solve with a little extra CSS and an added div. Plunker Demo The mechanics of this solution are pretty straightforward: Add an extra div to the navbar markup that serves as a clickable backdrop when the menu is expanded. CSS: .backdrop { position: fixed; top:...

It can be done by using the following command grunt build:moduleName1:moduleName2:moduleName3....:moduleNameN For example if you require the build to contain only tabs and buttons module , then the grunt command will be like grunt build:tabs:buttons The generated files will be present in dist folder For the list of module names...

Use the ng-repeat $index, is-open"$parent.viewModel.openIndex === $index" and assign the viewModel.openIndex in the open event: ng-click="$parent.viewModel.openIndex = $index". Notice the use of $parent, this is done to access the view model scope inside of a ng-repeat item scope.

Edit I think you misunderstood that total-items is the total pages to be displayed in the pagination control. The total-items is the total number of items in ALL pages. (Guess I should have looked at your question more carefully, but the issue is not that you can't access totalItems, it's...

Add $event.preventDefault() and $event.stopPropagation() to your open function in your controller and make sure to pass the $event to the open function in the ng-click: $scope.open = function($event) { $event.preventDefault(); $event.stopPropagation(); $scope.opened = true; }; and in your view: <button type="button" class="btn btn-default" ng-click="open($event)">Close</button> Run the code snippet to see...

I think problem is the event-propagation of the button, which could be prevented by $event.stopPropagation();. I already had a similiar issue which could solve your problem. I have updated the plunkr which is now working In the example in the official documentation you can also find the following lines of...

It's all about css. You just have to put something like this .dropdown-submenu{ overflow-y : scroll; } Or you can also use auto will show you the scroll bar only if needed. But to do so, you have to set a size with it....

I am owner of QuantumUI http//angularui.net and is is not truth to say anything about other's projects. However I can say that in short; ui-bootstrap: is pure angular based, but it is old and not compatiable with new angular versions. Also it's plugins are very simple. Also angular-strap is a...

getMilliseconds() returns the milliseconds part of the date, which is 0 is your case, since you constructed it from the date part (only) of a date. If I understand the requirement correctly, you're trying to get the date's representation as the number of milliseconds from the epoc. This is done...

if the controller code returns "true" ... I guess this is your problem. Your HTML configuration specifies that model value should have boolean type, not a string. So you need to make sure currentUser.get('Gender') returns true/false as boolean. Or otherwise define radio attributes as btn-radio="'true'" and btn-radio="'false'"...

The data collection you are passing into the ui-bootstrap typeahead directive, contains properties that clearly don't refer to products and is probably confusing the directive. Try cleaning them out ($id and $priority) of the array before giving it to the typeahead directive: // Store the raw response and assign the...

Remove the manual import from your entries.html and use ng-controller in the div that includes entries.html. Then, I think you will not need to use $scope.parent in the child controller, as the scope will be the same as the main one <tabset justified="true"> <tab heading="{{ tab.display }}" select="tsc.selectTab(tab.date)" ng-repeat="tab in...

This is becuase the sub-directives comes with angular-ui have child scopes that does not reflect this new filteredCampaigns variable to the controller's scope. 1st option - Hack it, 1) define an object to contain the filteredCampaigns dynamic variable $scope.context = {}; 2) change your accordion-group to: <accordion-group ng-repeat="campaign in context.filteredCampaigns=(campaigns...

In Bootstrap 3.3.1, the .modal-backdrop CSS properties were modified. The change resulted in the modal-backdrop having absolute positioning, instead of fixed positioning and no bottom property set. Instead of using the bottom property, the Bootstrap JS file injects an inline style setting the height of the modal-backdrop to the height...

In the documentation for the modal directive, the last paragraph mentions a modal.closing event that is dispatched on the modal dialog controller's scope when the modal is closed. You can use this event to determine how the modal was closed: $scope.$on('modal.closing', function(event, data) { console.log(data); if (data == 'backdrop click')...

The error in this case was caused by a error in the changed() function. With this function in the controller, all works fine: $scope.changed = function () { $scope.start_hour = { hour: $scope.hour.getHours(), min: $scope.hour.getMinutes() }; }; ...

No, there are no conflicts. Especially since ui-bootstrap is dependent on Twitter Bootstrap. From the linked docs: This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are: AngularJS...