Presently, I am able to retrieve the GET parameters using $location.$$search.

Nevertheless, I am still unsure about how to implement 2-way binding for both the URL and FORM in the following scenario.

In the demo image below, when a user updates the FORM elements, the corresponding URL should be:

https://lazyair.co/en/user/quick_search/index#?from=TOKYO&to=TAIPEI&depart=2016/06/03~2016/06/06&return=2016/06/08~2016/06/11&chart_type=column&depart_slider=10:00~24:00

Demo page:

Sliderbar directive JavaScript code

'use strict';

  quick_search_app.directive('ionslider',function($timeout){

      var get_hour_minute, getHHMMformat, isDepartureAtInInterval;

      get_hour_minute = function(value) {
        var hours, minutes;
        hours = Math.floor(value / 60);
        minutes = value - (hours * 60);
        if (hours.length === 1) {
          hours = '0' + hours;
        }
        if (minutes.length === 1) {
          minutes = '0' + minutes;
        }
        return [hours, minutes];
      };

      getHHMMformat = function(values) {
        var hours, minutes;

              hours = values[0].toString();
              minutes = values[1].toString();
              if (hours.length === 1) {
                hours = '0' + hours;
              }
              if (minutes.length === 1) {
                minutes = '0' + minutes;
              }
              return hours + ':' + minutes;
            }
      isDepartureAtInInterval = function(departure_at, slider){
          var t = new Date(Date.parse(departure_at))
          var HHMM_in_minutes = t.getUTCHours()*60 + t.getMinutes();
          return slider.from <= HHMM_in_minutes && slider.to >= HHMM_in_minutes;
      }
      var updateFlighSeries = function(slider, flight_series) {
        $.each(flight_series, function() {
            var current_series = this;
            angular.forEach(current_series.data, function(value, key) {
                  if(isDepartureAtInInterval(value.departure_at, slider)){
                      this.visible = true ;
                  }else{
                      this.visible = false ;
                  }
              }, current_series);
        });
      }
      return{
          restrict:'AE',
          scope: false,
          controller: 'quick_search_ctrl',

          link:function(scope, element, attr, ctrl){
              $(element).ionRangeSlider({
                      hide_min_max: true,
                      keyboard: true,
                      min: 0,
                      max: 1440,
                      from: 0,
                      to: 1440,
                      type: 'double',
                      step: 30,
                      prefix: "",
                      chartConfig: element.attr("chart-config"),
                      grid: true,
                      prettify: function (value) {
                        return getHHMMformat(get_hour_minute(value));
                      },
                      onChange: function(slider) {
                          var _this = this;
                          updateFlighSeries(slider, scope[_this.chartConfig].series)
                          angular.forEach(scope.chart_names, function(chart_cfg_name){
                                scope.$apply(function () {
                                  scope.lowestFlights[chart_cfg_name]  = angular.copy(scope.filterLowestPrice(scope[chart_cfg_name]))
                                  console.log(scope.lowestFlights[chart_cfg_name])
                                });
                          }, scope)
                      }
              });
          }
      }
  });

HTML

<ui-select.selectpicker{:theme => "select2", "ng-disabled" => "disabled", "ng-model" => "from", :name => "from", :theme => "select2", "ng-change"=>"updateDeparture(from)", :style => "width: 200px;", :required => "" }
  <ui-select-match{ "ng-cloak"=>"", :placeholder => t("from") } {{$select.selected.t_name}}  {{$select.selected.name}}</ui>
</ui>
<ui-select.selectpicker{"ng-disabled" => "disabled", "ng-model" => "to", :name => "to", :theme => "select2", "ng-change"=>"updateArrival(to)", :style => "width: 200px;", :required => ""}
  <ui-select-match.selectpicker{"ng-cloak"=>"", :placeholder => t("to")}  {{$select.selected.t_name}} {{$select.selected.name}}</ui>
  <ui-select-choices{:repeat => "node in arrivals | filter: $select.search" }
    <span ng-bind-html="node.t_name | highlight: $select.search"></span>
    <span ng-bind-html="node.name | highlight: $select.search"></span>
  </ui>
</ui>

url params were cleared in $rootScope.Scope#$digest cycle

I placed a breakpoint inside $locationChangeSuccess and discovered that the url parameters were cleared during the $rootScope.Scope#$digest cycle

app.run(function ($rootScope) {
    $rootScope.$on('$locationChangeSuccess', function () {
        debugger
        console.log('$locationChangeSuccess changed!', new Date());
    });
});

The 2-way binding not functioning on directive

The 2-way binding does not operate on the directive. Actually, the 2-way binding functions properly in the View, but is not effective with URL parameters.

DEMO page

controller(register departChartName and display its value with input box)

  $scope.departChartName = "yoyoyo"
  urlBinder.bind($scope, "departChartName", "DPNAME")

slider directive

app.directive('ionslider',function($timeout){
    return{
        restrict:'AE',
        scope: false,
        link:function(scope, element, attr, ctrl){
            $(element).ionRangeSlider({
                    chartName: element.attr("chart-name"),
                    onChange: function(slider) {
                        scope[this.chartName] = slider.from+"~"+slider.to
                        scope.$apply();
                    }

            });
        }

    }
});