title: deep merge objects with AngularJS
body: <p>Normally to shallow copy objects I would use <code>angular.extend()</code></p>
  
  <p>Here's an example of that:</p>
  
  <pre><code>var object1 = {
    "key": "abc123def456",
    "message": {
      "subject": "Has a Question",
      "from": "example1@example.com",
      "to": "example2@example.com"
     }
  };
  
  var object2 = {
    "key": "00700916391"
  };
  
  console.log(angular.extend({}, object1, object2));
  </code></pre>
  
  <p>Would give us:</p>
  
  <pre><code>{
   "key": "00700916391",
   "message": {
     "subject": "Has a Question",
     "from": "example1@example.com",
     "to": "example2@example.com"
    }
  }
  </code></pre>
  
  <p>But what if I wanted to merge objects so that parent keys are not over written by child objects:</p>
  
  <pre><code>var object1 = {
    "key": "abc123def456",
    "message": {
      "subject": "Has a Question",
      "from": "example1@example.com",
      "to": "example2@example.com"
     }
  };
  
  var object2 = {
    "key": "00700916391",              //Overwrite me
    "message": {                       //Dont overwrite me!
      "subject": "Hey what's up?",     //Overwrite me
      "something": "something new"     //Add me
     }
  };
  
  console.log(merge(object1, object2));
  </code></pre>
  
  <p>Would give us:</p>
  
  <pre><code>{
   "key": "00700916391",
   "message": {
     "subject": "Hey what's up?",
     "from": "example1@example.com",
     "to": "example2@example.com",
     "something": "something new"
    }
  }
  </code></pre>
  
  <ul>
  <li><p>Is there an Angular function that already does a deep merge that I am not aware of?</p></li>
  <li><p>If not is there a native way to do this in javascript recursively for n levels deep?</p></li>
  </ul>