如何将范围放在指令中以在更改视图时停止丢失它

我的第一个Angular项目，我有点困惑。我有一个定义范围的滑块（我相信），但是当我切换视图时会丢失该范围。 我不确定如何将范围放入指令中，以便两个视图都可以访问它，我相信这是解决方案。

索引.html

<div ng-view></div>
<div id="footerContainer">
        <a href="#data">SWITCH VIEW</a>
    </div>
</div>

输入.html

<div id="wrapper">
  <div ng-controller="SomeController">
    <div id="sliderContainer">
      Price: {{price}}
      <div id="mySlider" slider config="sliderConfig" model="price" ng-model="price" class="slider"></div>
    </div>
  </div>

数据.html

<div ng-controller="SomeController">
  <div>
    Price: {{price}}
  </div>
</div>

主.js

var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'input.html'
      })
      .when('/data', {
        templateUrl: 'data.html'
      });
  }
]);
myApp.controller("SomeController", function($scope) {
  $scope.sliderConfig = {
    min: 1,
    max: 101,
    step: 10
  }
  $scope.price = 1;
  $scope.setPrice = function(price) {
    $scope.price = price;
  }
});

myApp.directive("slider", function() {
  return {
    restrict: 'A',
    scope: {
      config: "=config",
      price: "=model"
    },
    link: function(scope, elem, attrs) {
      var setModel = function(value) {
        scope.model = value;
      }
      $(elem).slider({
        range: false,
        min: scope.config.min,
        max: scope.config.max,
        step: scope.config.step,
        slide: function(event, ui) {
          scope.$apply(function() {
            scope.price = ui.value;
          });
        }
      });
    }
  }
});