AngularJS - link and methods not working in nested ng-repeat

Question

I have a popup that shows items with ng-repeat, but inside the ng-repeat the links are not working, neither methods. Here is the html code

<div class="skills-container">
  <i class="fa fa-tags"></i>
    <button type="button" class="btn btn-sm btn-primary skills" ng-repeat="skill in work.skills" ng-Mouseover="getSimilar($index)"><{- skill -}>
      <div class="bubble">
        <i ng-show="work.similar === null" class="fa fa-spinner"></i>
        <a ng-repeat="s in work.similar" ng-href="#work/<{-s.id-}>">
          <img ng-src="img/portfolio/<{-s.img-}>" title="<{-s.title-}>" />
        </a>
        <span ng-show="work.similar === false">No similar works found</span>
      </div>
    </button>
<div>

and the method

$scope.getSimilar = function(index) {
    $scope.work.similar = null;
    WorkLoader.getSimilar($scope.work.skills[index], $route.current.params.workId).then(function(promise) {
        if(promise.msg) {
            alert(promise.msg);
            return;
        }

        $scope.work.similar = promise.data.length ? promise.data : false;
    });
};

By clicking on the image, nothing happens. I also tried attaching a ng-click="foo()" with a simple console.log("clicked") but nothing.
If I add a link outside the ng-repeat, like

<a href="http://google.com">Google</a>

it works.
But if I replace all hrefs with http://google.com, it doesn't work.

Thanks

example jsfiddle
http://jsfiddle.net/9Aw3q/

------------------EDIT-------------------

Please look at the code, the GoogleOK link in the fiddle is just a WORKING example. The links that doesn't work are the ones inside the ng-repeat

<div class="bubble">
  <i ng-show="work.similar === null" class="fa fa-spinner"></i>
<!-- links not working -->      
      <a ng-repeat="s in work.similar" ng-href="#work/<{-s.id-}>">
    <img ng-src="img/portfolio/<{-s.img-}>" title="<{-s.title-}>" />
  </a>
      <!-- link working -->
      <a href="http://google.com">Google</a>
  <span ng-show="work.similar === false">No similar works found</span>
</div>

Answer 1

It's because mouseover initiates the loop everytime you move your mouse. It's just not possible to do a click.

You need to keep a flag (boolean) when the mouse is over your element and reset this flag when your mouse moves out of your element.

Something like this:

JS

$scope.initOver = false;

$scope.resetOver = function() {
    $scope.initOver = false;
}

$scope.getSimilar = function (index) {
    if($scope.initOver == false) {
        $scope.work.similar = [{
            id: '1',
            title: 'First'
        }, {
            id: '2',
            title: 'Second'
        }, {
            id: '3',
            title: 'Third'
        }];
        $scope.initOver = true;
    }
};

HTML

<button type="button" class="btn btn-sm btn-primary skills" ng-repeat="skill in work.skills" ng-Mouseover="getSimilar($index)" ng-Mouseleave="resetOver()">

Fiddle

Answer 2

I think it is because your links are inside your button. Both links and button are clickable. Thus when you click on any link, it understands you clicked a button. Try placing your popover code outside the button and check.