How do I get angular.js to not over-ride another libraries functionality in regards to links?

Question

I am trying to incorporate this script from the Uikit library which helps organize images based on type. (Clicking on the nav above the images, will group them based on a specific type of your choosing) That link demonstrates how it should work. Now if you go to the page I am developing, you'll see the links seem to jump to another page.

I have tried to glean from this link how to handle links but it seems to circle around in page links.

Any suggestions?

UPDATE 11.15.2015

I found this article which illustrates an approach on how to integrate a jQuery plugin in your Angular environment.

HTML:

<ul class="uk-subnav uk-subnav-pill" switcher="{connect:'#switcher-content'}">
    <li class="uk-active"><a href="#" >All</a></li>
    <li><a href="#" >Logo</a></li>
    <li><a href="#" >Web</a></li>
    <li><a href="#" >App</a></li>
</ul>

JS:

rustyApp.directive('switcherContent', function() {
     return {
        restrict: 'A',
     link: function(scope, element, attrs) {
        $(element).toolbar(scope.$eval(attrs.switcherContent));
     }
   };
});

But alas it didn't work. Clicking the sifter, still redirects me to the home page.

Answer 1

You can try adding the target="_self" attribute to your <a> tags to bypass angular routing. Second suggestion would be try getting the photo library to make those links out of <button> tags instead of <a> tags.