Disabling state provider behavior for certain anchor tags in Angular

Question

I have an Angular SPA that is working fine when using $stateProvider however I am having issues with some anchor tags which are causing view to be changed to default behavior $urlRouterProvider.otherwise("home");

For example I want following anchor tag not to change state when clicked on it since it is only used for Carousel.

<a class="left carousel-control" href="#webTemplates" role="button" data-slide="prev">

Is there a way to ignore certain anchor tags using directives or some other technique. My $stateProvider code is below.

$stateProvider
.state("home", { url: "/home", templateUrl: baseTemplateUrl + "myviews/home.html" })
.state("about", { url: "/about", templateUrl: baseTemplateUrl + "myviews/about.html" })
.state("contact", { url: "/contact", templateUrl: baseTemplateUrl + "myviews/contact.html" })

$urlRouterProvider.otherwise("home");