Yes. You can use `attr.$observe` if you use interpolation at the attribute. 

But if this is not an interpolated attribute and you expect it to be changed from somewhere else in the application (what is extremely not recommended, read [Common Pitfalls](http://docs.angularjs.org/misc/faq)), than you can `$watch` a function return:

&lt;!-- language: lang-js --&gt;

    scope.$watch(function() {
        return element.attr(&#39;class&#39;); 
    }, function(newValue){
        // do stuff with newValue
    });

Anyway, its probably that the best approach for you would be change the code that changes the element class. Which moment does it get changed?

    attrs.$observe(&#39;class&#39;, function(val){});

You can also watch variable in the controller.

This code automatically hides notification bar after some other module displays the feedback message.

**HTML:**

    &lt;notification-bar
        data-showbar=&#39;vm.notification.show&#39;&gt;
            &lt;p&gt; {{ vm.notification.message }} &lt;/p&gt;
    &lt;/notification-bar&gt;

**DIRECTIVE:**

    var directive = {
        restrict: &#39;E&#39;,
        replace: true,
        transclude: true,
        scope: {
            showbar: &#39;=showbar&#39;,
        },
        templateUrl: &#39;/app/views/partials/notification.html&#39;,
        controller: function ($scope, $element, $attrs) {

            $scope.$watch(&#39;showbar&#39;, function (newValue, oldValue) {
                //console.log(&#39;showbar changed:&#39;, newValue);
                hide_element();
            }, true);

            function hide_element() {
                $timeout(function () {
                    $scope.showbar = false;
                }, 3000);
            }
        }
    };

**DIRECTIVE TEMPLATE:**

    &lt;div class=&quot;notification-bar&quot; data-ng-show=&quot;showbar&quot;&gt;&lt;div&gt;
        &lt;div class=&quot;menucloud-notification-content&quot;&gt;&lt;/div&gt;

I have this real strange problem with client side javascript setting cookies. I&#39;m developing a little 1 page demo at the moment to use cookies to store some &#39;preferences&#39;. Please note that I can&#39;t use a server side language for this demo or any 3rd party jQuery plugins.

So I&#39;ve written a javascript object to set a cookie:

    var cookie = {
      set: function (name,value,exdays) {
      
        var exdate = new Date();
        exdate.setDate(exdate.getDate() + exdays);
        var value = escape(value) + ((exdays==null) ? &quot;&quot; : &quot;; expires=&quot;+exdate.toUTCString());
        document.cookie=name + &quot;=&quot; + value;
        console.log(document.cookie);
      }
    }

    cookie.set(&#39;foo&#39;,&#39;bar&#39;,2);
    console.log(document.cookie);

It just returns an empty string. I&#39;ve gone into Chrome console to see if I can do it via directly modifying `document.cookie`

    &gt; document.cookie = &quot;foo=bar&quot;;
    &quot;foo=bar&quot;
    &gt; document.cookie
    &quot;&quot;

How do you set a cookie via client side javascript?

**Edit: I am not in incognito mode and cookies are enabled.**

Javascript document.cookie always returns empty string

I have a textarea with 200px of height, but when I pass that 200px with text I want to have the textarea expanded instead of keeping the 200px of height with a scroll bar.

It is possible to do that only with CSS?

It is possible to expand a textarea only with CSS?

Is it possible to &quot;watch&quot; for ui changes on the directive? 
something like that:

    .directive(&#39;vValidation&#39;, function() {
        return function(scope, element, attrs) {
            element.$watch(function() {
                if (this.hasClass(&#39;someClass&#39;)) console.log(&#39;someClass added&#39;);
            });
        }
    })

Is it possible to &#39;watch&#39; attributes&#39; changes

Is it possible to "watch" for ui changes on the directive?
something like that:
<pre><code class="hljs language-javascript">.directive('vValidation', function() {
 return function(scope, element, attrs) {
 element.$watch(function() {
 if (this.hasClass('someClass')) console.log('someClass added');
 });
 }
})
</code></pre>

I&#39;m running a simple `ng-repeat` over a JSON file and want to get category names. There are about 100 objects, each belonging to a category - but there are only about 6 categories. 

My current code is this:

    &lt;select ng-model=&quot;orderProp&quot; &gt;
      &lt;option ng-repeat=&quot;place in places&quot; value=&quot;{{place.category}}&quot;&gt;{{place.category}}&lt;/option&gt;
    &lt;/select&gt;

The output is 100 different options, mostly duplicates. How do I use Angular to check whether a `{{place.category}}` already exists, and not create an option if it&#39;s already there?


edit: In my javascript, `$scope.places = JSON data`, just to clarify

How to make ng-repeat filter out duplicate results

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?

I want to inject a service into app.config, so that data can be retrieved before the controller is called. I tried it like this:

Service:

    app.service(&#39;dbService&#39;, function() {
    	return {
    		getData: function($q, $http) {
    			var defer = $q.defer();
    			$http.get(&#39;db.php/score/getData&#39;).success(function(data) {
    				defer.resolve(data);			
    			});
    			return defer.promise;
    		}
    	};
    });

Config:

    app.config(function ($routeProvider, dbService) {
    	$routeProvider
    		.when(&#39;/&#39;,
    		{
    			templateUrl: &quot;partials/editor.html&quot;,
    			controller: &quot;AppCtrl&quot;,
    			resolve: {
    				data: dbService.getData(),
    			}
    		})
    });

But I get this error:

&gt; Error: Unknown provider: dbService from EditorApp

How to correct setup and inject this service?

Inject service in app.config

Alright, so I have been stumbling upon some issue for a long time and I would like to hear an opinion from the rest of community.

First, let&#39;s look at some abstract controller.

    function Ctrl($scope, anyService) {
    
       $scope.field = &quot;field&quot;;
       $scope.whenClicked = function() {
          util();
       };
    
       function util() {
          anyService.doSmth();
       }
       
    }

Clearly we have here:

 - regular scaffold for controller with `$scope` and some service injected
 - some field and function attached to the scope
 - private method `util()`

Now, I&#39;d like to cover this class in unit tests (Jasmine). However, the problem is that I want to verify that when I click (call `whenClicked()`) some item that the `util()` method will be called. I don&#39;t know how to do that, since in Jasmine tests I&#39;m always getting errors that either the mock for `util()` hasn&#39;t been defined or was not called.

**Note: I&#39;m not trying to fix this particular example, I&#39;m asking about testing such code pattern in general. So please don&#39;t tell me &quot;what is exact error&quot;. I&#39;m asking how to do that, not how to fix this.**

I have been trying a number of ways around this:

 - obviously I cannot use `$scope` in my unit tests as I don&#39;t have this function attached to this object (it usually ends with message `Expected spy but got undefined` or similar)
 - I tried attaching those functions to the controller object via `Ctrl.util = util;` and then verifying mocks like `Ctrl.util = jasmine.createSpy()` but in this case `Ctrl.util` is not being called so tests fail
 - I tried to change `util()` to be attached to `this` object and mocking `Ctrl.util` again, with no luck

Well, I cannot find my way around this, I would expect some help from JS ninjas, a working fiddle would be perfect.


How to write testable controllers with private methods in AngularJs?

How can I do the ng-include conditionally in angularJS?

 For example I only want to include something if, the variable `x` is set to `true`.

    &lt;div ng-include=&quot;/partial.html&quot;&gt;&lt;/div&gt;

Conditional ng-include in angularjs

Following my previous [question][1], I&#39;m now trying to call a method on the parent controller from my directive. I get an undefined parameter. Here&#39;s what I do:


    &lt;body ng-app=&quot;myApp&quot; ng-controller=&quot;MainCtrl&quot;&gt;
      &lt;span&gt;{{mandat.rum}}&lt;/span&gt;
      &lt;span&gt;{{mandat.surname}}&lt;/span&gt;
    &lt;input type=&quot;text&quot; ng-model=&quot;mandat.person.firstname&quot; /&gt;
    &lt;my-directive mandate-person=&quot;mandat.person&quot; updateparent=&quot;updatePerson()&quot; &gt;

      &lt;/my-directive&gt;
    &lt;/body&gt;

And the script:

    var app = angular.module(&#39;myApp&#39;, []);

        app.controller(&#39;MainCtrl&#39;, function ($scope) {
            $scope.mandat = { name: &quot;John&quot;, surname: &quot;Doe&quot;, person: { id: 1408, firstname: &quot;sam&quot; } };
            $scope.updatePerson = function(person) {
                alert(person.firstname);
              $scope.mandat.person = person;   
            }
        });


        app.directive(&#39;myDirective&#39;, function () {
            return {
                restrict: &#39;E&#39;,
                template: &quot;&lt;div&gt;&lt;span&gt;{{mandatePerson.id}}&lt;span&gt;&lt;input type=&#39;text&#39; ng-model=&#39;mandatePerson.firstname&#39; /&gt;&lt;button ng-click=&#39;updateparent({person: mandatePerson})&#39;&gt;click&lt;/button&gt;&lt;/div&gt;&quot;,
                replace: true,
                scope: { mandatePerson: &#39;=&#39;, updateparent: &#39;&amp;&#39; }
                }
            }
        )

when the updatePerson method gets called, person is undefined.

jsfiddle here :  http://jsfiddle.net/graphicsxp/Z5MBf/7/

  [1]: https://stackoverflow.com/questions/15990122/passing-object-to-angularjs-directive-from-the-controller

calling method of parent controller from a directive in AngularJS

I have a variable that will be used by one or more Controllers, changed by Services.
In that case, I&#39;ve built a service that keeps this variable in memory, and share between the controllers.

The problem is: Every time that the variable changes, the variables in the controllers aren&#39;t updated in real time. 

I create this Fiddle to help. http://jsfiddle.net/ncyVK/

--- Note that the `{{countService}}` or `{{countFactory}}` is never updated when I increment the value of count.

How can I bind the Service/Factory variable to $scope.variable in the Controller? What I&#39;m doing wrong?
      


Binding variables from Service/Factory to Controllers

I have begun to learn about AngularJS and am confused about what the differences are between the `ng-app` and `data-ng-app` directives.

What is the difference between ng-app and data-ng-app?

If I have a navbar in bootstrap with the items

    Home | About | Contact

How do I set the active class for each menu item when they are active? That is, how can I set `class=&quot;active&quot;` when the angular route is at 

 1. `#/` for home
 2. `#/about` for the about page
 3. `#/contact` for the contact page



How to set bootstrap navbar active class with Angular JS?

The application I&#39;m building requires my user to set 4 pieces of information before this image even has a chance of loading.  This image is the center-piece of the application, so the broken image link makes it look like the whole thing is borked. I&#39;d like to have another image take its place on a 404.

Any ideas? I&#39;d like to avoid writing a custom directive for this.

I was surprised that I couldn&#39;t find a similar question, especially when the first question in the docs is the same one!

http://docs.angularjs.org/api/ng.directive:ngSrc

Content Type	Original Author	Original Content on Stackoverflow
Question	iLemming	View Question on Stackoverflow
Solution 1 - Angularjs	Caio Cunha	View Answer on Stackoverflow
Solution 2 - Angularjs	Ketan	View Answer on Stackoverflow
Solution 3 - Angularjs	Marcin Rapacz	View Answer on Stackoverflow

Is it possible to 'watch' attributes' changes

Angularjs Problem Overview

Angularjs Solutions

Solution 1 - Angularjs

Solution 2 - Angularjs

Solution 3 - Angularjs

It is possible to expand a textarea only with CSS?

Javascript document.cookie always returns empty string

Attributions