Angular data not updating?

Question

JavaScript

Good day!
There is this code:

angular.module("transactionsApp", [])
        .controller("formCtrl", function ($scope, $http) {

            $scope.count = 0;

            var date = new Date();
            var prevDate = new Date();
            prevDate.setDate(prevDate.getDate()-7);/*берем время на неделю назад*/
            $scope.dateStart = prevDate.getFullYear() + '-' + (prevDate.getMonth() + 1) + '-' + prevDate.getDate();
            $scope.dateFinish = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
            $scope.transactions = 0;

            $http.post('/cabinet/transactions/getTransactions', {
                    start: $scope.dateStart,
                    finish: $scope.dateFinish,
                    transactions: $scope.transactions,
                    count: $scope.count,
                })
                .success(function(param){
                    console.log(param);
                    $scope.dataTable = param;
                })
                .error(function() {
                    console.log('error');
                });

            $scope.getData = function () {
                angular.element('#dateStart').triggerHandler('change');
                var data = {
                    start: $scope.dateStart,
                    finish: $scope.dateFinish,
                    transactions: $scope.transactions,
                    count: $scope.count,
                };
                console.log(data);
                $http.post('/url', data)
                    .success(function(param){
                       console.log(param);
                    })
                    .error(function() {
                        console.log('error');
                    });
                $scope.count +=20;
            };
        });

and this is the html:

<div class="transaction" ng-controller="formCtrl">
    <form ng-submit="getData(e)">
    <div class="button-search">
        <div class="form-group">
            <label for="exampleInputName2">Дата начала:</label>
            <input type="text" class="form-control date" id="dateStart" placeholder="" ng-model="dateStart" >
        </div>
        <div class="form-group">
            <label for="exampleInputName2">Дата окончания:</label>
            <input type="text" class="form-control date" id="dateFinish" placeholder="" ng-model="dateFinish" >
        </div>
        <div class="form-group">
            <label for="fm-8">Тип транзакции</label>
            <select name="transaction_type" class="form-control" id="transactions" ng-model="transactions" aria-labelledby="fm-7">
                <option value="0">Все</option>
                <option value="1">Начисление стартового бонуса покупателю</option>
                <option value="2">Ручное начисление бонусов на карту покупателя</option>
                <option value="3">Ручное списание бонусов с карты покупателя</option>
                <option value="4">Начисление бонусов на карту покупателя</option>
                <option value="5">Списание бонусов с карты покупателя</option>
                <option value="6">Сгорание бонусов на карте покупателя</option>
                <option value="7">Начисление Дружеского Бонуса</option>
            </select>
        </div>
        <div class="form-group">
            <button name="submit" value="filter" class="btn-search-form" aria-labelledby="">Искать</button>
        </div>
    </div>
    <table class="table table-striped table-transactions">
        <thead>
            <tr>
                <th>Время</th>
                <th>Бонус</th>
                <th>№ чека</th>
                <th>Сумма</th>
                <th>Касса</th>
                <th>Тип транзакции</th>
                <th>Ответственный</th>
                <th>№ карты</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in dataTable">
                <td>{{item.time}}</td>
                <td>{{item.bonus}}</td>
                <td>{{item.ticket}}</td>
                <td>{{item.sum}}</td>
                <td>{{item.kassa}}</td>
                <td>{{item.type}}</td>
                <td>{{item.access}}</td>
                <td>{{item.card}}</td>
            </tr>
        </tbody>
    </table>
</form>
    <button class="update-table">
        <span class="glyphicon glyphicon-repeat"></span>
    </button>
</div>

the problem is that when the data is changed, the update of $scope.dateStart and $scope.dateFinish does not work, because there is no change in the value itself, it is set through the datapicker of the bootstrap framework, i.e. when you click on the input, a window with a date selection pops up, I choose, the text in the field changes, but in fact, the value itself has not changed and initially remains the same as it was set by default. If you change the date manually without a datapicker, then the connection works out and changes occur, the data changes. I tried to simulate the change event, but this did not work at the moment, what could be the problem, where did I go wrong?

Answer 1

!!!Date must be a date, not a string!!!
For the correct operation of the datepicker in anular, you will have to conjure with events. I would advise https://angular-ui.github.io/bootstrap/#/datepicker

Answer 2

1) It is best to use a ready-made directive for this, it should be under bootstrap.
2) With dates it is better to operate with the Date type and not in string.
3) triggerHandler is an angular cartoon, make a normal js event - new Event('change') and dispatch it to the element, then the model should react.