$scope.path not working when click

I'm trying to make the path change when I click a btn but, it doesn't work .

I tried the paths-ajax-load-example but could't make it work.

html code

<leaflet paths="path" defaults="defaults" width="100%" height="100%" markers="markers" center="center"></leaflet>

<body ng-controller="HomeCtrl"> 
    <nav id="search">
        <form ng-submit="getPath()" class="form-inline pull-xs-right">
            <input class="form" type="text" ng-model="origin" name="origin" placeholder="Origin">
            </br>
            <input class="form" type="text" ng-model="destination" name="destination" placeholder="Destination">
            </br>
            <button type="submit" class="btn btn-default">Find path</button>
        </form>
    </nav>
</body>

Angular controller

angular.module('demoapp')

.controller("HomeCtrl", [ '$scope',  function($scope) {

    $scope.getPath = function() {

        angular.extend($scope, {

                center: {
                lat: 4.5656,
                lng: -74.09266,
                zoom: 12,
            }
        })

        $scope.path = {
                polyline: {
                    type: "polyline",
                    color: 'black',
                    weight: 5,
                    stroke: "true",
                    latlngs: [{lat: 4.5656, lng: -74.09266}, {lat: 4.56588, lng: -74.09306}]
                }
            }
        }
    } 
}]);

Any help will be appreciated

tombatossals / angular-leaflet-directive

$scope.path not working when click #1176