Сохранить текст элемента вместо ввода

Я создал поле ввода, в котором пользователи могут ввести название фильма и нажать на div, который вставляет заголовок в базу данных. Но то, что я хочу, вместо сохранения входных данных пользователя сохраняет текстовое значение в щелканном элементе.

Это текущая ситуация,

%div{"ng-click" => "addMovie()"}
  %input{:type => "text", "ng-model" => "title"}
  addMovie action.

Что я хочу,

%div{"ng-click" => "addMovie()"}
  %span.title{"ng-model" => "title"}
    {{ movie.original_title }}

Теперь, когда пользователь нажимает на div, он должен сохранять текст (movie.original_title) внутри тега span.

контроллер,

$scope.addMovie = function() {

  if(!$scope.title || $scope.title === '') { return; }
  movies.create({
    title: $scope.title,
  }).then(init);

  $scope.title = '';
};

Но я не уверен, что мне изменить, где я могу использовать ng-model для присвоения title или изменить его в контроллере?

Вот как отображаются заголовки. Пользователь может искать название фильма, а выпадающий список создается со всеми заголовками. Я хочу, чтобы пользователи .addmovie на .addmovie div и должны сохранять такие вещи, как название, дата выпуска и т.д.

%input{"ng-change" => "search(searchquery)", "ng-model" => "searchquery", "ng-model-options" => "{ debounce: 500 }", :id => "search_input", :placeholder => "Search a movie!"}
%ul#showresults
  %li.search_results{"ng-repeat" => "movie in movieList"}
    .addmovie
      %span
        Add Movie
    %img{"ng-src" => "http://image.tmdb.org/t/p/w500/{{ movie.poster_path }}"}
    %span
      {{ movie.original_title }}

EDIT. Подойдя ближе к ответу, было довольно просто

$scope.addMovie = function() {
    movies.create({
      title: $('.title').text(),
    }).then(init);
  };

Проблема заключается в том, что она сохраняет все .titles а не щелкнула, но это должно быть легко исправить.