Why is the data not being passed to the modal window?

Question

JavaScript

Good day!

Strange things are happening in my code. I need to transfer one variable to the modal window. I prescribe it in data-whatever links,

<a class="btn btn-default btn-xs" href="" data-toggle="modal" data-target="#dishCard" data-whatever="{{dish.id}}">
             <i class="fa fa-info-circle fa-lg"></i>
           </a>

I pass it through jQuery and the magic begins. If so:

$('#dishCard').on('show.bs.modal', function (event) {
              var button = $(event.relatedTarget)
              $scope.dish_id = button.data('whatever')
              toastr.info('Dish.ID: '+button.data('whatever'))
        });

it is transmitted normally. If without a toaster, that is, like this:

$('#dishCard').on('show.bs.modal', function (event) {
              var button = $(event.relatedTarget)
              $scope.dish_id = button.data('whatever')
        });

then nothing is sent anywhere. I have already broken my head, tell me why this is happening, what am I doing wrong? And is there a smarter way to give data to a modal window?

Answer 1

So on the bootstrap site, it seems like a different example is given. Do you need to pass a value to a field?