2-way binding not working?

What am I doing wrong here? When I change the input value from “Change this”, leave the textbox to trigger the search() on blur, it doesn’t seem to update the scope variable it is bound to…


You have to initialize your query before using it.

For some reason the blur seems to be fired before the scope is populated. I’m not sure if that might be a bug.

Working plnkr: http://plnkr.co/edit/GOdrPcHVdGCrsrTtkhKc?p=preview

I am having something similar 2-way binding not always working, My example is very complicated than this one, mainly I have a calendar (ui-calendar) with a bunch of events fetched from a web service, once you tab an event it should open a modal with events details.

Tabing the event set a $scope.currentEvent to the selected event, and in the modal I bind the $scope.currentEvent.title into the modal header. Sometimes it work and sometimes it appears to be empty. I suspect that it’s a problem of racing events or something like this.

.controller('CalendarCtrl', function($scope, Schedule, $ionicLoading, $ionicModal) {

  // Add Loading Popup
  var loading = $ionicLoading.show({
    content: 'We are getting the calander for you...',
    showDelay: 1000

  // EventSorces Array
  $scope.eventSource = [];
  // current event object
  $scope.currentEvent = {};

  /* config ui object */
  $scope.uiConfig = {
    // UI-Calendar Config.
      // height: 700,
      editable: false,
        left: '',
        // center: 'title',
        right: ''

      /* EventClick (Fired once an event */
      eventClick: function(calEvent, jsEvent, view) {
        // Set currentEvent in scope to clicked event.
        $scope.currentEvent = calEvent;


        // Then Open Modal.


  // Get Schedule data from api

    // Prepare Events Data as a fullCalendar EventsSource Object
    $scope.eventSource.push( Schedule.prepareEvents(events) );

    // Hide Loading 

  $ionicModal.fromTemplateUrl('templates/show.html', function (modal) {
      $scope.modal = modal;
  }, {
      scope: $scope,
      animation: 'slide-in-up'

  $scope.openModal = function() {

    // Show Modal


  $scope.closeModal = function() {
    // Hide Modal

    // Reset the currentEvent Object
    $scope.currentEvent = {};


Logging the $scope.currentEvent always show the calendar event object in the console, but as I mentioned before sometimes it work in the Modal template. (That’s why I am suggesting that it’s an event racing problem).

1 Like

This might be related to a modal issue, where the modal is not ready. Have you tried chaining the modal with then() I think the 0.9.19 release introduced that feature. Otherwise, try a timeout.

Hi @daniel, I am not sure how it should be implemented in my case, as you see, I create a modal and then change the data binded inside the modal, I can’t see how it’s still not ready. btw it works fine for the first time and then it randomly works. If you can provide a code example that can be integrated with the above code I will be thankful.

can you provide a plnkr?

@daniel - thank you for your first reply - that solved my problem!! :slight_smile:

Here you are, It may take sometime for the calendar events to show, so be patient, Plunker

@jonathan_hindi You need to wrap you show modal call in a scope apply:

$scope.openModal = function() {
  $scope.$apply(function() {

Working Plnkr: http://plnkr.co/edit/zbroGivRk1Q4I4FUGc5t?p=preview

Thanks @daniel, It’s working now, can you give me a brief look why should be wrapped with $scope.apply, I am newbie to both AngularJS and Ionic.

$scope.apply works fine

Hey daniel, I tried a $timeout around my modal-init; doesn’t seem to help – but thanks for the tip!

I’m getting an “Error: [$rootScope:inprog] $apply already in progress”. Same code as above.