Выполнение угловой HTML-директивы

Я создаю веб-приложение, которое извлекает данные из бэкэнд. Прямо сейчас код html выглядит так:

<div ng-app="App" ng-controller="controller">

    <form ng-submit="getValues()">
        <div>
            <button type="submit">Select</button>
        </div>
    </form>

    <plot-chart value="data"></plot-chart>

</div>

и код javascript выглядит так:

angular.module('App', [])
.controller('controller', function controller ($scope, $http) {

    $scope.getValues = function () {
        //value getter when submit is pressed 
        $http({
            method: 'GET',
            url:"SOME_URL_HERE" + 
                "SOME_PARAM" +
                $scope.some_param.some_id +
                '&OTHER_PARAM=' +
                $scope.other_param.other_id +
                '&group=' +  some_group_id
        }).success(function (data) {
            $scope.data = data;

            if($scope.data == "null"){
                $scope.error = data.message;
                // clear the data part
                $scope.data = '';
                return;
            }

            // clear the error messages
            $scope.error = '';
        }).error(function (data) {
            $scope.error = data.message;
            // clear the data part
            $scope.data = '';
            return;
        }); 
    };

});

.directive("plotChart", function (data) {
    //Graphing values with D3.js that I got from the getter above 
});

Я хочу, чтобы мой html-документ вызывал директиву "makeprettygraph" и сначала удалял любой старый график, а затем рисовал новый график на странице, когда я отправляю форму, но я теряюсь, как сделать html.

Итак, теперь мой вопрос следующий: какой код мне нужно реализовать, чтобы html-документ выглядел "makeprettygraph" -directive при нажатии кнопки отправки? Как мне "подключить" кнопку к действию, которое рисует график?