title: Angular2 accessing binding instance variable within callback
body: <p>In angular2 I have the following component:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  const dialog = require("electron").dialog;
  const xml2js = require('xml2js');
  const fs = require("fs");
  const ipc = require('electron').ipcRenderer;
  
  @Component({
    selector: 'ct-config-editor',
    templateUrl: 'config.editor.component.html'
  })
  export class ConfigEditorComponent {
  
    constructor() {
      this.selected_file = 'Max';
    }
  
  
    clicked(event){
      alert("lol");
        ipc.send('open-file-dialog');
  
        ipc.on('selected-directory', function (event, path) {
          this.selected_file = `You selected: ${path}`;
        });
    }
  }
  </code></pre>
  
  <p>The view has a correctly bound property called selected_file like this :</p>
  
  <pre><code>&lt;h1&gt;{{selected_file}}&lt;/h1&gt;
  </code></pre>
  
  <p>The value of the H1 is max at the start -- however after my callback runs, I don't have access to the <code>this.selected_file</code> because the context of the 'this' is not my class.</p>
  
  <p>How do I access my instance variable within the callback?</p>