Angular $scope undefined on form submit

I don't know what I am doing wrong here, can anyone see what I am doing wrong? I just want to pass my form inputs (in this case a date picker) to a controller function, but everything I try to access just shows up as undefined!

Here is my form

<form ng-submit="showRefinedGameMarkers(refinements)">
    <div class="list">
      <div class="datepickers">
      From Date:
      <label class="item item-input">
        <input ng-controller="DatepickerCtrl"
        type="text" 
        placeholder="Pick date" 
        ng-model="refinements.from_datepicker" 
        name="from_datepicker" 
        ng-click="opendateModal()" 
        readonly>
      </label>
      </div>

Here is my controller class

.controller('MapController', function($scope, $ionicLoading, gameFactory, $compile) {

  $scope.showRefinedGameMarkers = function(refinements) {
    $scope.refinements = refinements;
    console.log($scope.refinements);
    ...
    }
})

Everything I have tried is just showing up as undefined, so annoying! Any help would be greatly appreciated thank you

Add $scope.refinements = {}; at the top of your controller.

You dont need pass refinements to your submit function, because its bound using ng-model and angular will change $scope.refinements for you.

Also,you need to initialize your refinements variable in your controller.

$scope.refinements = {}