angularjs,twitter-bootstrap , Angularized Bootstrap Menu Only Collapsing Dropdown, not Entire Navbar after Link Click

Angularized Bootstrap Menu Only Collapsing Dropdown, not Entire Navbar after Link Click


Tag: angularjs,twitter-bootstrap

I have a Angularized bootstrap menu that fully collapses the entire navbar if it is loaded in a view, but not when in the index.html. When loaded into my index.html, it only collapses the dropdown and not the whole navbar when an item is clicked on.

I need it in the index.html before the views (data-ng-view) since I have content between the menu and views (AdSense). When placed before my views in the index.html page, if I click on a link, I am able to go that link... but the overall menu stays open instead of closing after going to a link. However, the dropdown will of "Categories" will collapse as intended, it is just the overall menu that won't.

I am using AngularUI and have injected 'ui.bootstrap' into the App (that is how it works when loaded in a view). The controllers for my views are tied to the page they relate to.


when('/home', { templateUrl: './views/home.html', controller: 'homeCtrl' }).

Here is my navigation:

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-ng-init="isCollapsed = true" data-ng-click="isCollapsed = !isCollapsed">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        <a class="navbar-brand" href="/"><h1 id="pfch1">My Title</h1></a>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" data-ng-class="{collapse: isCollapsed}">
        <ul class="nav navbar-nav">
            <li><a href="/home">Home</a></li>
            <li class="dropdown" data-ng-class="{ open : dd1 }" data-ng-init="dd1 = false" data-ng-click="dd1 = !dd1">
                <a class="dropdown-toggle" role="button" aria-expanded="false" href="#">Categories <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="/categories/1/cat1">cat1</a></li>
                    <li><a href="/categories/2/cat2">cat2</a></li>
                    <li><a href="/categories/5/cat3">cat3</a></li>
                    <li><a href="/categories/4/cat4">cat4</a></li>
                    <li><a href="/categories/6/cat5">cat5</a></li>
                    <li><a href="/categories/3/cat6">cat6</a></li>
            <li><a href="/add-article">Add Article Link</a></li>
        <form class="navbar-form navbar-right">
            <div class="form-group">
                <div data-ng-controller="userInfo">
                    <div data-ng-controller="loginCtrl" data-ng-hide="loggedin">
                        <input class="btn btn-default" type="submit" value="Login" data-ng-click="login()" />
                    <div data-ng-controller="loginCtrl" data-ng-show="loggedin">
                        <input class="btn btn-default" type="submit" value="Signout" data-ng-click="logout()" />

Here is the index.html (please note that the menu above is included via an ng-include. I have tried it without the ng-include but it still doesn't collapse):

<!DOCTYPE html>
<html xmlns="" lang="en" data-ng-app="pfcModule">
<!-- Inform Search Bots that this is a SPA -->
<meta name="fragment" content="!" />

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="{{pageDescription | limitTo: 155}}">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<base href="/">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet" />

<!-- Just for debuggidata-ng- purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warnidata-ng-.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src=""></script>
  <script src=""></script>
<!-- Google Analytics -->

<!-- Container start -->
<div class="container">
    <!-- Top Menu -->
    <div data-ng-include="'templates/topmenu.html'"></div>
    <!-- Responsive AdSense included here -->
    <div data-ng-view></div>
    <!-- Responsive AdSense included here -->
        <p>&copy; My Site 2015 | <a href="/termsandconditions">Terms and Conditions</a></p>
<!-- Container end -->
<!-- Scripts placed at end of Body for execution -->
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/angular-resource.min.js"></script>
<script src="js/libs/dirPagination.js"></script>

<!-- Auth0 Scripts -->
<!-- We use client cookies to save the user credentials -->
<script src="//"></script>
<!-- Auth0 Lock script and AngularJS module -->
<script src="//"></script>
<!-- angular-jwt and angular-storage -->
<script type="text/javascript" src="//"></script>
<script type="text/javascript" src="//"></script>
<!-- Auth0 Scripts -->
<script src="//"> </script>

<!-- Application Scripts -->
<script src="js/app.js"></script>
<script src="js/services/services.js"></script>
<script src="js/controllers/addArticle.js"></script>
<script src="js/controllers/articleID.js"></script>
<script src="js/controllers/articlesCategory.js"></script>
<script src="js/controllers/articlesCount.js"></script>
<script src="js/controllers/articleVoting.js"></script>
<script src="js/controllers/homeArticles.js"></script>
<script src="js/controllers/loginManagement.js"></script>
<script src="js/controllers/modalDependency.js"></script>
<script src="js/directives/directives.js"></script>


Here is my App.js:

var pfcModule = angular.module('pfcModule', [

function ($routeProvider, authProvider, $httpProvider, $locationProvider, jwtInterceptorProvider, paginationTemplateProvider) {
        when('/home', { templateUrl: './views/home.html', controller: 'pfcHomeArticlesCtrl' }).
        when('/categories/:articlecategoryID/:articlecategoryName', { templateUrl: './views/categories.html', controller: 'pfcArticlesCategoryCtrl' }).
        when('/article/:articleTitle/:articleID', { templateUrl: './views/article.html', controller: 'pfcArticleIDCtrl' }).
        when('/add-article', { templateUrl: './views/add-article.html', controller: 'pfcArticlePostCtrl', requiresLogin: true }).
        when('/login', { templateUrl: './views/login.html', controller: 'loginPageCtrl' }).
        when('/termsandconditions', { templateUrl: './views/terms.html' }).
        otherwise({ redirectTo: '/home' });
    $httpProvider.defaults.headers.common['X-ZUMO-APPLICATION'] = '1111111111111111111';
    $httpProvider.defaults.headers.common['Content-Type'] = 'Application/json';
        domain: '',
        clientID: '1111111111111111',
        callbackURL: location.href,
        loginUrl: '/login'

    jwtInterceptorProvider.tokenGetter = function (store) {
        return store.get('token');


    // Pagination provider


.run(function ($rootScope, auth, store, jwtHelper, $location) {
$rootScope.$on('$locationChangeStart', function () {
    if (!auth.isAuthenticated) {
        var token = store.get('token');
        if (token) {
            if (!jwtHelper.isTokenExpired(token)) {
                auth.authenticate(store.get('profile'), token);
            } else {



In order to cause the menu to collapse when you click one of the links you can toggle the value of isCollapsed with ng-click. The reason it was collapsing when inside a view was likely because it was actually reloading the navigation, not collapsing it.

Modify your navigation like this:

<ul class="nav navbar-nav">
    <li ng-click="isCollapsed=!isCollapsed"><a href="/home">Home</a></li>
    <li" class="dropdown" data-ng-class="{ open : dd1 }" data-ng-init="dd1 = false" data-ng-click="dd1 = !dd1">
        <a class="dropdown-toggle" role="button" aria-expanded="false" href="#">Categories <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
            <li ng-click="isCollapsed=!isCollapsed"><a href="/categories/1/cat1">cat1</a></li>
            <li ng-click="isCollapsed=!isCollapsed"><a href="/categories/2/cat2">cat2</a></li>
            <li ng-click="isCollapsed=!isCollapsed"><a href="/categories/5/cat3">cat3</a></li>
            <li ng-click="isCollapsed=!isCollapsed"><a href="/categories/4/cat4">cat4</a></li>
            <li ng-click="isCollapsed=!isCollapsed"><a href="/categories/6/cat5">cat5</a></li>
            <li ng-click="isCollapsed=!isCollapsed"><a href="/categories/3/cat6">cat6</a></li>
    <li ng-click="isCollapsed=!isCollapsed"><a href="/add-article">Add Article Link</a></li>



change icon on collapse in Bootstrap 2.3 not in bootstrap 3

I am using bootstrap 2.3 collapse in my project. I need to change icons on collapse means on show and hide I need to change icons. with bootstrap 3 some shown and hidden functions are showing in internet but I need with Bootstrap 2.3. Please let me know how to...

Passing params to an angular service from a controller?

I'm an angular newby. I'm hoping to pass params to a service that fetches data form a server depending on those params. for example, if I want to pass a book name string and then use it in the service to concatenate with the request url. The documentation does not...

function is undefined if no module is declared in Angular

I am new in Angular and I am studying controllers. In my code I setup a simple controller access but when I tried to run in my browser I encountered a series of error messages that looks like this: "Error: [ng:areq] Argument 'personController' is not a function, got undefined In...

How do I add a class on ng-click from layout?

Here is the page layout: <li class="dropdown"> <ul class="submenu"> <li ng-click="SetActiveMenuForPersonalInfo();"> <a href="../Account/#/PersonalInfo">@Translate("MY_ACCOUNT")<a> </li> </ul> </li> When a user clicks on my account, they get this: This is the function in the controller: $scope.SetActiveMenuForPersonalInfo = function () { $scope.activeMenu = 'Settings'; $scope.activeLink = "PersonalInfo"; console.log("Active menu:...

HTML elements in Angular bindings expression

Is that possible to insert HTML elements in an Angular expression ? Let's take a few example. I would like to do something like this: <table> <tr ng-repeat="employee in employees"> <td>{{employee.firstname ? employee.firstname : '<p style="color:red">No name</p>'}}</td> <td>{{employee.job}}</td> </tr> </table> In our controller, we have: $scope.employees = [{firstname:'Bob', job:'Developer'}, {firstname:'Paul',...

Angularjs $watchCollection on $rootScope not triggered when values updated from directive

I'm running into a bit of an issue solving a problem with some Angularjs functionality I'm working on. The basic idea is that I have a system where certain criteria must be met before the user is allowed to advance to the next section of the app. One example of...

navbar disappears but no dropdown

So been trying to set up a navbar that collapses to a drop down when the size is under a certain number of pixels. So far I have managed to make the normal menu disappear when it goes under a certain size, but once I make the window smaller and...

AngularJS dynamically call function

at this point, I'm new to AngularJS. This works: scope.$apply(scope.hideTooltip()); But calling the function dynamically does not work: scope.$apply( scope.$eval(attrs.ngEnter, {'event': event}) ); HTML: <input type="text" ng-model="value" ng-enter="hideToolTip()" /> The enitre directive: app.directive('ngEnter', function() { return function(scope, element, attrs) { console.log(scope.hideTooltip()); element.bind("keydown keypress", function(event) { if(event.which === 13) { console.log(attrs.ngEnter);...

Improve slow angular directive

I have a page that renders table view or div/blocks view depending on window width. But the swop between views happens very slow. Maybe I am not doing things in the best way? I basically have 2 scope variables(block and table, set to true or false) defined in the controller....

REST API with token based authentication

I want to develop a web site with AngularJS. On the backend side I will use Codeigniter REST framework. I have some security issues and I don't want to start developing without fixing them on my mind. I don't want to use something like api key because it will be...

How to make background body overlay when use twitter-bootstrap popover?

Currently I used this twitter-bootstrap popover: <button type="button" class="btn btn-default" style="margin-top:11px; padding-bottom:4px; padding-top:4px;" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Upgrade The output: How I can make the background overlay like bootstrap modal? My expected output I use this jquery to popover $(function(){ $('[data-toggle="popover"]').popover({ placement...

Modal from inside Bootstrap Tabs using Knockout foreach

I have Bootstrap tabs bound to a KnockoutJS observable array using a foreach binding, which is working fine. I now want to launch a Bootstrap modal from inside the active tab. <div class="tab-content"> <!-- ko foreach: trueData --> <div class="tab-pane fade in" data-bind="css:{active: $index() == 0}, attr :{'id': 'tab' +...

Pre-Select of an option in a select not working

I use the following select. Currently, I get empty options in my select on start. To avoid these empty options in angularJS, I want to preselect the first option in the select. But It do not work. I get an 'Cannot read property 'conditions' of undefined'. Thank you for your...

Save to 3 firebase locations with a slow internet connection

Sometimes I'm having issues with firebase when the user is on a slow mobile connection. When the user saves an entry to firebase I actually have to write to 3 different locations. Sometimes, the first one works, but if the connection is slow the 2nd and 3rd may fail. This...

Using ng-click to toggle between two functions

I am using the datepicker from bootstrap-UI for angular. I would like to toggle between two functions. now() and clear(). Is this possible inside Angular's ng-click? The toggle has the ng-click="today()" I would like to add clear() to it, thanks. Controller Code: $ = function() { $scope.dt = new...

Angular ng-repeat cache (avoid re-rendering on state change)

We have huge rendering spikes with ng-repeat in Angular application. Main page shows a huge list of cover images ("::" and "track by" are in place). On first load it works acceptable. But if user changes the state (we use UI-Router) and goes back to the home page afterwards then...

How to add class on ng-click?

I have this: How can i add class "active-link" on: @Translate("PERSONAL_INFORMATION") @Translate("NOTIFICATIONS") @Translate("CHANGE_PASSWORD") @Translate("GAME_SETTINGS") ...

Create angular page in Django to consume data from JSON

In an angular controller I have a list of items: app.controller('MainController', ['$scope', function($scope) { $scope.items = [ {"foo":"bar 1"}, {"foo":"bar 2"}, {"foo":"bar n"} ] }]); The following html page, based on angular, displays a list of item: <!DOCTYPE html> <html> <head> <title>list</title> <script src= ""></script> </head> <body data-ng-app="myApp"> <div data-ng-controller="MainController">...

How to select multiple selected value from select option

My controller code looks like $scope.items = [{ heading: 'Sports', types: [{ name: 'Football', }, { name: 'Persie', }, { name: 'Ronaldo', }, { name: 'Messy', }], id: '1' }, { heading: 'Cricket', types: [{ name: 'Tendulkar', }, { name: 'Lara', }, { name: 'Ponting', }], id: '2' }]; My...

Getting CROS Error even after adding header in node.js for Angular js

I am trying to consume REST API from NODE JS for Angular js,even after adding cors header in my server code I am getting error XMLHttpRequest cannot load Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers. I am new to both Angular JS and Node JS. Node JS...

Is there a way to fire an event every time an ajax call in made in AngularJS?

What I'm trying to do is every time a call to the backend is made, I want a spinner to load up with a dark overlay. I know I can do this by simply running the spinner before the call is made, but I'm working with multiple developers and I...

validation of AngularJS direcrives

I read on W3C School that to make a valid HTML page I have to add data before each angular directive in HTML file (e.g.: <p>The name is <span data-ng-bind="firstName"></span></p> or <div data-ng-app="" data-ng-init="firstName='John'"> Ok that's fine. I have two questions: Should this prefix be used only for ng- directives?...

AngularJS & Bootstrap Modal - loading template outside controller

I have a dialog which is being used in 3 scenarios within the same page. I have created a controller similar to the below: var modalInstance = ${ templateUrl: 'myModalContent.html', controller: 'ModalInstanceCtrl', size: size, resolve: { items: function () { return $scope.items; } } }); <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header">...

Socket.IO message doesn't update Angular variable

I have a client-server setup with AngularJS running on the client. // Server.js var io = require('')(server); io.on('connection', function (socket) { socket.on('message', function (msg) { //console.log(msg); console.log(msg); io.emit('message', msg); }); }); As observed, it essentially emits a message events with the data stored in the variable msg. And then...

UI-Router : Prevent access to parent state

I am moving to UI-Router as my App router. I want to have nested state as below: $stateProvider .state('app', { url: '/app', template: ' <div ui-view></div>', authenticate: true }) .state('app.state1', { url: '/state1', templateUrl: 'app/state1.html', controller: 'State1Ctrl', controllerAs: 'state1', authenticate: true }) .state('app.state2', { url: '/state2', templateUrl: 'app/state2.html', controller: 'State2Ctrl',...

AngularJS, Animate on change: directive $watch not called

I'm creating a live websocket application which requires grabbing the users attention upon change of a value. The following directive is used in multiple places on the same page: <span class="badge" animate-on-change animate-class="highlightWarning" animate-watch="totalAnswers">{{totalAnswers}}</span> and <div animate-on-change animate-class="colorWarning" animate-watch="rq.answer" ng-switch="question.type" ng-repeat="rq in recentResponse.answers" ng-if="rq.question =="> Now, rq.answer rarely changes,...

MvcSiteMapProvider - Enhanced bootstrap dropdown menu

I'm trying to build a menu like this: For reference I'm using this library @Html.MvcSiteMap().Menu("BootstrapMenuHelperModel") @model MenuHelperModel <nav class="navbar" role="navigation"> <div class="container-fluid menu-container"> <div class="collapse navbar-collapse"> <div class="navbar-header"> <span class="navbar-brand">FAR BACKOFFICE</span> </div> <ul class="nav nav-pills"> @foreach (var node in Model.Nodes) { if...

Can't save json data to variable (or cache) with angularjs $http.get

I have weird angularjs problem. I'm trying to fetch data from Rest Webservice. It works fine, but I can't save json data to object. My code looks like: services.service('customerService', [ '$http', '$cacheFactory', function($http, $cacheFactory) { var cache = $cacheFactory('dataCache'); var result = cache.get('user'); this.getById = function(id){ $http.get(urlList.getCustomer + id).success(function(data, status,...

Getting generic anchor text on click with angularJS/jQuery returns empty string

I have an anchor generated from a JSON database query result. The anchor represents the title of an article (I have no idea how many articles there will be). I want to be able to get the anchor text (the article title), upon clicking the anchor in order to use...

Centering navbar pills vertically within the navbar using flexbox

I am terrible at CSS so I am having trouble centering my <li> (navbar pills) vertically for my navbar. This navbar is from twitter bootstrap Here is the HTML for my navbar: <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li role="presentation">...

How can this be undefined in the constructor of an Angular config class?

I've found some examples online, where people create TypeScript config classes and pass them on to Angular. When I've tried it, I got the weird exception, that this was undefined. A closer look to the other implementations revealed, they only use the constructor, so, are those examples actually inherently wrong...

Setting up the page grid using push and pull

I'm using Bootstrap and I'm having issues setting up my grid. How do I use bootstrap's push/pull to setup my columns as below? This is what I've got so far, <div class="row"> <div class="col-xs-5 col-sm-3 col-md-3">A</div> <div class="col-xs-7 col-sm-9 col-md-2 .col-md-push-7">B</div> <div class="col-xs-12 col-sm-12 col-md-7 .col-md-pull-9">C</div> </div> ...

AngularJS: Adding ng-click within element.append

Within my directive I have the following code, which will be used to continually append to an html element. //Establishes the type of question and therefore what should be displayed app.directive('questionType', function ($http, $compile) { return { restrict: 'A', link: function (scope, element, attr, model) { switch (scope.Question.inputType) { case...

remove char from string with angular

I'm trying to remove a period '.' from a value that comes from a feed, however I don't really want to do this in my app.js, rather in my view. So if I do the following: value: {{item.v_value}} I get 3.5, I'd simply like to strip out and render out...

Merge and sum values and put them in an array

I'm retrieving values from an external source and apply a foreach loop to the results, with the code below. angular.forEach(data, function(value, key) { if (value.start_date > firstdayOfWeek && value.start_date < lastdayOfWeek) { console.log(value.firstname + ' - ' + value.distance); } else { //do nothing } }); The result is console...

$scope variable does not update within $interval function

I am using $interval for my custom stopwatch. Within the $interval function I have a variable $scope.inputValue which is binded to a range. The problem is that after each iteration of $interval (every 500ms), the most recent $scope.inputValue is not taken into account, but only the value at the initialization...

success and error function in the controller for a service

I have the following code in a service and I am calling fetchData function from the controller. Service app.service("geturl", function($http) { urllist = []; geturl.fetchData = function() { var data = []; for (i = 0; i < urllist.length; i++) { (function(index) { return $http.get(geturl.urllist[index], { timeout: 8000 }) .then(function(response)...

Bootstrap toggle doesn't display well when added dynamically

I'm trying to add bootstrap toggle switch dynamically but it does not display well after adding it. Thanks for your help! <input id="TheCheckBox" type="checkbox" data-off-text="Yes" data-on-text="No" checked="false" class="BSswitch"> <p> <a class="btn btn-lg btn-primary" href="#">Display another Toggle</a></p> $('.btn').on('click', function () { $('p').after( '<input id="TheCheckBox" type="checkbox" data-off-text="Male" data-on-text="Female" checked="false" class="BSswitch">' ); });...

calling one controller from another controller

I have 2 controllers and I am calling the second controller from the function of first controller $ = function () { var modal = ${ templateUrl: 'views/view1.html', controller: 'controller2', // other parameters }); /* some code */ } Both the controllers are in the same folder. There are similar...

Angular-strap data-trigger='focus' not working

the data-trigger focus is not working for me ... <span data-content='foo' data-html='true' data-placement='top' data-container='body' data-trigger='focus' bs-popover> Nothing is actually happening when I am clicking on this element. If I remove data-trigger='focus' and set it to hover or click, it does work. I am using angularjs. 1.2.18 and angular-strap : 2.2.4...

Angular $http and Fusion Tables in IE9

I am trying a simple get request to a google fusion table in my angular controller. $http.get(url) .success(function(data) { //Do stuff with data }) This works in firefox, chrome, safari and IE10+ however in IE9 (Which I am requried to support) the request fails to even send and the console...

$http.get returns actual php script instead of running it (yeoman, grunt)

I'm building a "simple" AngularJS app with an articles newsfeed. My articles are stored in a mysql database, and I extract them using php PDO. I used to do this using AJAX with a simple LAMP configuration (php5, mysql, apache2), and everything worked as intended. Now I'm trying to rebuild...

Can't get angular.js to loop through array and post to html

Edit: changed ng-controller to ng-app in body tag, was typo I'm new to angular and im trying to use ng-repeat to post all items in the products[] to html but the {{expressions}} come out as text rather than computing. I don't have my laptop so I'm testing all this on...

Iframe does not show scrollbar

Can't seem to make the iframe appear with a scroll-bar. Go to email: [email protected] pass: 111111 Reload the list with F5, then click new invoice on the right side. The content is lengthy but doesn't show the scroll-bar. My css uses the following: .frm { position: fixed; width: 100%;...

AngularJS line break at points after a maximum length was reached

I'm using ng-repeat to fill a table. Some elements have a pretty long length, and I'm looking for a way to cut the content into multiple lines, if a specific length is reached. During research I found Angulars limitTo, but it does not exactly look like I was looking for....

angular.js - simplest way to handle click inside controller

is there any better way of handling clicks inside a controller than this? <div ng-controller="SomeController> <a href="/#!/something" ng-click="doTheSame()">link1</a> <a href="/#!/something" ng-click="doTheSame()">link2</a> <a href="/#!/something" ng-click="doTheSame()">link3</a> .. <a href="/#!/something" ng-click="doTheSame()">link99</a> </div> in jQuery I would do something like: $('div > a').on('click', function() { // do some stuff }); ...

How to use a service with Http request in Angular JS

I'm using AngularJS to build my web application, I've been always using controllers to make HTTP request, which makes things easier and clear for me. But for a better code structure, and better execution for my application, I wanted to use services instead of controllers to use the web service....

End to end alignment of 3 Columns using Bootstrap

I am new to bootstrap. I tried aligning three sections end to end (horizontal manner) with equal space. (1st column should be aligned to extreme left of the container and last should be aligned to extreme right.) There is extra space at the third column. I have added bootstrap css...

Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG

I have one app: app.js: angular.module('AngApp', [ 'angularGrid' ]); My own restangular service.js: var app = angular.module('AngApp'); app.factory('restService', ['Restangular', function (Restangular) { // make use of Restangular } ]); and controller.js: var app = angular.module('AngApp'); app.controller('ctrlAG', ['$scope', '$http', '$log', '$mdDialog', 'Restangular',function ($scope,$http, $log, $mdDialog, Restangular) { // make use of...