Angular.js + ui-router wrong controller

Question

I'm using angular 1.6.1 and angular-ui-router 0.3.2.

I have basic routes set-up as follow:

{
  state: 'home',
  config: {
    url: '/home',
    templateUrl: '...',
    title: 'home'
  }
},
{
  state: 'view',
  config: {
    url: '/view',
    controller: '...',
    controllerAs: 'vm',
    templateUrl: '...',
    title: 'view'
  }
}

this object then gets passed as needed to $routeProvider.state(). in my home state I use $state.go() to switch to the view state. When I'm at the view state my template looks like so:

<div>
  <div class="go-back" ng-click="vm.goBack()">
    <img src="/src/assets/images/back.png"/>
  </div>
  <tabs>
    <tab>
      <directive1></directive1>
    </tab>
    <tab>
    </tab>
    <tab>
    </tab>
  </tabs>
  <directive2></directive2>
  <directive3></directive3>
</div>

Each directive here has a bound controller to it.

My problem is that the directives controller are wrong. What I mean by it is if I inspect for example directive2 html in the inspector, and try to inspect it's controller in chrome using angular.element($0).scope() I will get a scope which is not the correct scope of the directive. Even weirder it's parent scope is the scope of directive3. If I were to remove directive3 from the template than directive2 will start working again, and it will have the correct scope attached to it. If I were to place directive2 under directive3 in the template it will solve this problem as well. Same problem for the <div class="go-back">...</div> element inside the template. It's scope is the correct one and the vm.goBack() function is called, but if I were to remove directive3 from the template then vm.goBack() won't be called anymore (even tho when inspecting the element scope in the console, it is the correct scope). Problem remains for other controller to, not having their correct scope attached to them for some reason and I can't figure out why.