Develop Reference

Angular-Scroll: same as example, but not working (Plunker)

I'm trying to use Angular-Scroll (https://github.com/oblador/angular-scroll) to simply scroll to an <a> link on the same page, but do it nicely and smoothly. When I couldn't get it to work, I made a super simple setup in Plunker.
Plunker: https://plnkr.co/edit/w1GBTAjxtHL3H4LAuHoO
If you download the zip of the GitHub, there's an example I'm trying to do in the folder location angular-scroll-master/example/container.html. There's really nothing complex, the angular script is basically just finding the container id for the directive to use.
I cannot figure out why my page will not scroll.
HTML
<div class="medium-6 columns" du-scroll-container="container">
Link
</div>
<div id="container" class="medium-6 columns" du-scroll-container="">
<div id="junk">LINK JUNK HERE YAY!!</div>
</div>
</div>
JS
angular.module('scrollDemo', ['duScroll']).
controller('myCtrl', function($scope) {
var container = angular.element(document.getElementById('container'));
});

I edited your plunker and it seems to be working now. Here is the link.
The problem was that the container div is not the scrollable container that would be the body element to make it work as the scrollable element you can set the max-height of the container so that it will become the scrollable element or remove the du-scroll-container="container" atribute so that it will use the body as the scrollable element.

Angular: Using $last to get last element visible using ng-show

So I have an ng-repeat container div inside which I have a bunch of images.
For each image, there is a div next to it. I want only the div of the final image to be visible and I achieve this using $last. This works like a charm.
Now I have a filter button in the page also, and when this button is clicked some of these images get hidden. This show/hide is done using ng-show on the image tag.
What I want is that when the filter button is clicked and some of the images are hidden, I want the div next to the final visible image to get shown. Seems like $last is not aware of the ng-show/hide value. How can I handle it so that the div next to the last visible image is still shown?
<div class='container' ng-repeat="image in album">
<div class='wrapper' ng-show="getFilterValue(image.imageId)">
<div><img src='{{image.src}}'></div>
<div class='embellish-end' ng-class='{'hidden':!$last}'>The End</div>
</div>
</div>
Any help is greatly appreciated!

Instead of using ng-show you could filter the ng-repeat using angular's built in ng-repeat filter. If your getFilterValue function returns a boolean this should work for you. Then your $last should know what is truly last based on what meets the filter criteria.
<div class='container' ng-repeat="image in album | filter:getFilterValue(image.imageId)">
<div class='wrapper'>
<div><img src='{{image.src}}'></div>
<div class='embellish-end' ng-class='{'hidden':!$last}'>The End</div>
</div>
</div>

Try putting the ng-show on the image rather than the whole div wrapper:
<div class='container' ng-repeat="image in album">
<div class='wrapper'>
<div ng-show="getFilterValue(image.imageId)"><img src='{{image.src}}'></div>
<div class='embellish-end' ng-class='{'hidden':!$last}'>The End</div>
</div>
</div>
Unrelated: use ng-src rather than src when using angularized image sources to avoid browser errors.

Angular ui-layout toggle not working

Angular Version - 1.4.7
Ui-Layout Version - 1.4.1
Plunkr Link - Ui-layout Collapse problem
<div ui-layout-container id="main1" size="20%" min-size="20%">
One
</div>
<div ui-layout-container id="main2" size="80%" min-size="80%">
Two
<div ui-layout="config2">
<div ui-layout-container id="child1" size="80%" min-size="80%">
<br/> Three
</div>
<div ui-layout-container id="child2" size="20%" min-size="20%">
Four
</div>
</div>
</div>
Collapse of section "two" in the plunkr example is not working using the toggle button in the one|two splitter. Likewise Collapse of section "four" in the plunkr example is not working using the toggle button in the three|four splitter. Please help

Seems there's a bug in ui-layout so it won't collapse the right hand side or bottom panels.
Here's the updated Plunkr with a fix
UI-Layout Collapse Fix
I've added this on line 529 of ui-layout1.4.1.js ...
prevContainer.uncollapsedSize = null;

This is late but I think I know the answer.
UI-Layout only allows you to drag when the min/max sizes are possible. For example, if you have min-size:"20%" max-size="20%", you won't be able to drag at all, because there's no flexibility within the range.
Thus if you set two neighboring ui-layout-containers to each have min-size 20% and 80%, of course you won't be able to drag--there's no where the two divs can go that fulfill both min-sizes.

Trying to set ng-class of AngularJS accordion-heading does nothing

I have an accordion where some of the entries need to have a heading that emphasizes that the data in that group shows a problem that needs attention. I tried using a "accordion-heading" with a "ng-class" for "has-error" (from bootstrap) that is conditional on the method that determines whether there is something that needs attention. I've tried several variations of this, and the "class" attribute never gets rendered in the HTML.
This is an excerpt from my HTML:
<accordion close-others="false">
<div ng-repeat="(name, dataSource) in dataSourceMap">
<accordion-group>
<accordion-heading>
<span ng-class="{'has-error': anyFailuresInList(dataSource)}">
{{name}}
</span>
</accordion-heading>
{{anyFailuresInList(dataSource)}}
</accordion-group>
</div>
</accordion>
The example in the documentation at enter link description here indicates that this should be possible, even though the example is a little broken (it appears to put the class on an empty "i" element).

accordion-group doesn't support ng-class well.
Please use class instead.
If you want to set the style conditionally, you can use the ? operator. For instance:
<uib-accordion-group class="{{isSpecial ? 'special-style':''}}">

This can be done by applying a css class to the group instead of the header directly
<div accordion-group is-open="node.active" is-disabled="node.active" ng-class="{'panel-active': node.active}" ng-repeat="(key,node) in nav.nodes">
<div accordion-heading >{{node.title}}</div>
</div>
Then in your css change the back for the first DIV
.panel-active>div {
background-color: #YourActiveColor;
border-color: #YourActiveColor;
}

Angular js ng-click doesn't work in child element

I'm trying to toggle a variable on click of an element in the DOM and I'm getting some strange behaviour.
Full Example Here
Essentially if I put the ng-click on the .options div and leave the controller on the .options-tab div, the event triggers (but applies to everything inside the .options div). And for some reason I am forced to apply the ng-controller again.
<div ng-app ng-controller="Swipe" class="container">
<div class="options" ng-click="swiped=!swiped2">
<div ng-controller="Swipe" class="options-tab" ></div>
</div>
</div>
If I put it on the element that I want it on, it doesn't trigger the event.
<div ng-app ng-controller="Swipe" class="container">
<div class="options">
<div ng-controller="Swipe" class="options-tab" ng-click="swiped=!swiped2"></div>
</div>
</div>

You had a few issues:
Multiple controller declarations creating duplicate scopes
ng-click="swiped1=!swiped1" on both the options and options-tab elements (it was being set and then reversed immediately)
Your 2nd example was set to ng-click="swiped=!swiped2" instead of ng-click="swiped2=!swiped2"
Updated working fiddle: http://jsfiddle.net/Xya3f/2/